javascript - forEach 只打印最后一个值，这是 javascript 中典型的闭包问题

Question

我尝试使用这种方法来解决任何关闭问题，但显然这对我不起作用。我尝试将其更改为 let、const 甚至箭头函数，但代码始终打印最后一个数组元素。

谁能告诉我我做错了什么:

var data = [{
  "first_name": "John",
  "last_name": "Doe",
  "phone": "31227-5325"
}, {
  "first_name": "Jane",
  "last_name": "Campbell",
  "phone": "123123-5325"
}];

window.onload = function() {
  console.log('loaded....');
  data.forEach(function(elem, index) {

    let p = index;
    document.querySelector('#fname').innerHTML = '<td>' + data[p].first_name + '</td>';
    document.querySelector('#lname').innerHTML = '<td>' + data[p].last_name + '</td>';
    document.querySelector('#phone').innerHTML = '<td>' + data[p].phone + '</td>';

  })

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-border">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tr class="tr1">
    <td id="fname"></td>
    <td id="lname"></td>
    <td id="phone"></td>
  </tr>

</table>

http://jsbin.com/gasegeqila/1/edit?js,output

谢谢

Answer 1

你的问题是因为你在循环中设置了相同元素的值，所以只有上一次迭代中设置的值是可见的。

您需要在循环中创建一个新行并在其中设置值，如下所示:

var data = [{
  "first_name": "John",
  "last_name": "Doe",
  "phone": "31227-5325"
}, {
  "first_name": "Jane",
  "last_name": "Campbell",
  "phone": "123123-5325"
}];

window.onload = function() {
  var tbody = document.querySelector('table tbody');
  
  data.forEach(function(elem, index) {
    var tr = document.createElement('tr');
    tr.innerHTML = `<td>${data[index].first_name}</td><td>${data[index].last_name}</td><td>${data[index].phone}</td>`;
    tbody.appendChild(tr);
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-border">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>