forEach仅打印最后一个值，在javascript中的典型关闭问题
我尝试使用这种方法作为通常解决任何关闭问题的方式，但显然这不适用于我。我尝试将其更改为let，const或甚至箭头函数，但代码始终打印最后一个数组元素。forEach仅打印最后一个值，在javascript中的典型关闭问题
谁能告诉我什么，我做错了什么：
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
感谢
你的问题，是因为你设置的循环相同元素的值，所以只在最后一次迭代中设置的值是可见的。
你，而不是需要在循环创建一个新的行中设置的值出现，就像这样：
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>谢谢你的回答。 – Mike
编辑：
一种方法是创建行一个第二单元分别这样的：
var row = table.insertRow(i + 1);
var cl1 = row.insertCell(0);
var cl2 = row.insertCell(1);
var cl3 = row.insertCell(2);
cl1.innerHTML = data[i].first_name;
cl2.innerHTML = data[i].last_name;
cl3.innerHTML = data[i].phone;
我不想追加，我想为每个值插入一个新行 – Mike
编辑答案.. –
代码总是打印最后一个数组元素？
从Docs
的ID全局属性定义一个唯一的标识符（ID） 必须是在整个文档中是唯一的。
从您的脚本：
document.querySelector('#fname').innerHTML = ...;
document.querySelector('#lname').innerHTML = ...;
document.querySelector('#phone'). = .....
你总是有新的one.So更换您的数据，则最后一个元素得到更新。
您可以循环就是这样，
var table = document.querySelector('.table.table-border');
data.forEach(function(elem, index) {
let p = index;
let newRowHtml = '<tr><td>' + data[p].first_name + '</td>' +
'<td>' + data[p].last_name + '</td>' +
'<td>' + data[p].phone + '</td></tr>';
table.insertAdjacentHTML('afterend', newRowHtml);
})
您可以使用array#reduce创建您行字符串，然后将生成的字符串添加到您的表身。
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....');
var row = data.reduce(function(str, elem, index) {
let p = index;
str += '<tr><td>' + data[p].first_name + '</td><td>' + data[p].last_name + '</td><td>' + data[p].phone + '</td></tr>';
return str;
}, '');
document.querySelector('table tbody').innerHTML = row;
}<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 class="tr1">
</tbody>
</table>
问题寻求帮助调试（**“为什么不是这个代码的工作？” **）必须包括所期望的行为，一个特定的问题或错误，并在最短的代码要重现它**在问题本身**。没有**明确问题陈述**的问题对其他读者没有用处。请参阅：[如何创建最小，完整和可验证示例]（https://stackoverflow.com/help/mcve）。 –
就这样说，你的问题是因为你设置了循环中每个元素的值，所以只有最后一次迭代中设置的值是可见的。您需要在循环中创建一个新行，并在其中设置值 –
您的逻辑本身并没有什么错误，它是您的输出，它写入相同的HTML元素并覆盖以前插入的数据。 – delinear