[英]Javascript - Looping over an array of objects, only last object show
我花了点时间试图解释标题,但我担心它与我遇到的问题有些差距。
简而言之,我正在使用for循环来迭代此对象数组。
var people = [
{
name: "John Doe",
age: 33,
gender: "male",
loc: "Springfield"
},
{
name: "Jane Doe",
age: 32,
gender: "female",
loc: "Springfield"
}
];
for循环通过传递两个参数(元素ID和数组)的函数运行,如下所示。
var list = {
html: function (el, array) {
var container = document.getElementById(el), html;
for( var i=0;i<array.length;i++ ) {
html = '<div class="item">';
html += '<h1>'+array[i].name+'</h1>';
html += '<p>Age: '+array[i].age+'</p>';
html += '<p>Sex: '+array[i].gender+'</p>';
html += '<p>Location: '+array[i].loc+'</p>';
html += '</div>';
console.log( array[i].name+', '+array[i].age+', '+array[i].gender+', '+array[i].loc );
}
container.innerHTML = html;
}
}
list.html('list', people);
问题:循环仅返回数组中的最后一个对象。 我不确定为什么会这样或如何解决。 任何帮助将不胜感激。 谢谢。
这里是一个链接: 相关演示
使用空字符串初始化html
var并在for
循环的开头添加+
:
var container = document.getElementById(el), html = "";
for( var i=0;i<array.length;i++ ) {
html += '<div class="item">'; // add plus here
foor循环内的第一条指令是一个赋值
html = '<div class="item">'
因此在每次迭代中,“ html”的全部内容都会被替换。 你应该用
html += '<div class="item">';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.