Javascript - 循环遍历一个对象数组,只显示最后一个对象

Question

我花了一点时间试图制作解释发布的标题,但我担心它有点落后于我所遇到的问题.

简而言之,我使用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); 

问题:循环只返回数组中的最后一个对象.我不确定为什么会这样或者如何解决它.任何援助将不胜感激.谢谢.

这是一个相关演示的链接

Answer 1

html使用空字符串初始化var并+在for循环开头添加:

var container = document.getElementById(el), html = "";   
for( var i=0;i<array.length;i++ ) {
    html  += '<div class="item">';  // add plus here