Javascript - 循环访问对象数组，仅显示最后一个对象

Javascript - Looping over an array of objects, only last object show

本文关键字：显示 最后 一个对象 数组 循环 访问 对象 Javascript      更新时间：2023-09-26

我花了一些时间试图制作解释问题的标题，但我担心它与我遇到的问题有点差。

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

问题：循环仅返回数组中的最后一个对象。我不确定为什么会发生这种情况或如何解决它。任何协助将不胜感激。谢谢。

这是指向以下链接：相关演示

Init 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">';
相关文章：