javascript - 循环遍历json数组列表

Question

我们两周前刚刚开始第三学期，正在学习基本的事件/Dom/fetch 操作。

我应该从 https://jsonplaceholder.typicode.com/users 获取数据并获取所有姓名和电话号码。

这就是我所做的:

/* 
 * 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 => {
      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;
      }

      //for (var key in data) {
      //    if(data.hasOwnProperty(key)) {
      //        document.getElementById("allUsers").innerHTML = data[key].name;
      //    }
      //}

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

<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>

正如你所看到的，我设法获取单个用户，这不是问题，但尝试获取多个数据行对我来说似乎很麻烦。我尝试了 3 种不同的方法，它们都只给我数组中的最后一个人，但如果我将其打印到控制台，它就会给我全部。

请帮助我。

Answer 1

您需要在循环外初始化结果字符串，并在循环完成后设置 HTML 的值。

/* 
 * 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>