Loop through json array list

You need to initialize your result string outside the loop and set the value of the HTML after the loop is finished.

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var userID = document.getElementById("userID");
const url1 = "https://jsonplaceholder.typicode.com/users/";
const url2 = "https://jsonplaceholder.typicode.com/users";
//JSON.stringify(data)
function getUser() {
  fetch(url1 + userID.value)
    .then(res => res.json())
    .then(data => {
      var all = "<p>" + "Name: " + data.name + "</p>";
      all += "<p>" + "Phone: " + data.phone + "</p>";

      document.getElementById("singleUser").innerHTML = all;
    });
}

//***************Code that needs look on is right here ********************

function getAllUsers() {
  fetch(url2)
    .then(res => res.json())
    .then(data => {
      // Traditional for loop
      var all = "";
      for (var i = 0; i < data.length; i++) {
        //console.log(data[i]);
        all += "<p>" + "Name: " + data[i].name + "</p>";
        all += "<p>" + "Phone: " + data[i].phone + "</p>";
      }
      document.getElementById("allUsers").innerHTML = all;

      // Enhanced for loop
      var users = "";
      data.forEach(function(key) {
        users += "<p>" + "Name: " + key.name + "</p>";
        users += "<p>" + "Phone: " + key.phone + "</p>";
      });
      document.getElementById("allUsers").innerHTML = users;

      // Mapped to string
      document.getElementById("allUsers").innerHTML = users.map(user => {
        return "<p>" + "Name: " + user.name + "</p>" +
               "<p>" + "Phone: " + user.phone + "</p>";
      }).join(""); 
    });
}

<h1>Hello World!</h1>
<h1>Test if deployed on Tomcat via Travis Ci</h1>
<h6>Calculator Client</h6>

<input type="number" id="firstNumber"><br>
<input type="number" id="secondNumber"><br>
<div id="operations">
  <button name="opr">+</button>
  <button name="opr">-</button>
  <button name="opr">X</button>
  <button name="opr">/</button>
  <br>
</div>
<button id="clear">Clear</button>
<p id="result"></p>

<h6>Dynamic UI manipulation with data obtained via fetch</h6>

<input type="number" id="userID">
<button onClick="getUser()">Get user</button>
<button onClick="getAllUsers()">Get all</button>
<br>
<div id="singleUser"></div>
<div id="allUsers"></div>

<script src="calculator.js" type="text/javascript"></script>
<script src="fetch.js" type="text/javascript"></script>

All your problem are here (normally): document.getElementById("allUsers").innerHTML = all;

The line document.getElementById("allUsers").innerHTML allow you to directly have access to the string content of the DOM element. In your case you need to append multiple row to this DOM, so you just need to replace the affectation to a append affectation. Simply change = to +=.

Here are the modification you need to do:

for (var i = 0; i < data.length; i++) {                   
    console.log(data[i]);
    var all = "<p>" + "Name: " + data[i].name + "</p>";
    all += "<p>" + "Phone: " + data[i].phone + "</p>";
    document.getElementById("allUsers").innerHTML += all;
} 

You can also do a more elegent solution:

let html = "";

for (let i = 0; i < data.length; i++) {                   
    console.log(data[i]);

    html += "<p>" + "Name: " + data[i].name + "</p>";
    html += "<p>" + "Phone: " + data[i].phone + "</p>";
}

document.getElementById("allUsers").innerHTML = html;

I don't have tested the code, but it should work!

Just for your knowledge, you should also learn where to use var and let:

• var should be used for global variables because they can be reached from anywhere with window.hello (if you variable has "hello" has name).
• let should be used for local variables because they only can be reached in the same scope.

In your loop, setting innerHTML replaces the content each time. If you want to append, consider creating new nodes.

// Create new paragraph
var name = document.createElement("p");
// Set text content to name value
name.appendChild(document.createTextNode(data[i].name));
// Append paragraph to #allUsers element
document.getElementById("allUsers").appendChild(name);
// Create new paragraph
var phone = document.createElement("p");
// Set text content to phone value
phone.appendChild(document.createTextNode(data[i].phone));
// Append paragraph to #allUsers element
document.getElementById("allUsers").appendChild(phone);

You have a problem in your loop. See the below code which take the appending to the DOM out of that loop.

  var users = ""; // So that you will not initialize it every time you iterate the loop
  data.forEach(function(key) {
    users += "<p>" + "Name: " + key.name + "</p>";
    users += "<p>" + "Phone: " + key.phone + "</p>";        
    console.log(key.name);
  });
  document.getElementById("allUsers").innerHTML = users; // So that you will change the DOM/ UI only once with all the date.

Analyse:

Since you are initializing and changing your users variable in each iteration it will only have the value for that iteration. That is why you ended up having the last persons name. (This will be corrected if you are appending to a different DOM location each time, but too complex)