时间戳

首页 > 解决方案 > 在其值中附加带有数组的对象列表

jquery - 在其值中附加带有数组的对象列表

问题描述

我正在尝试在表格中显示对象列表。但我得到了未定义的值。我在对象中有对象，但我似乎无法让它工作。

我的对象

var names = {
  fname : {"Bill", "John"},
  lname : {"Smith", "Evans"},
  age : {"30", "41"}
}

我尝试了一个 for 循环，但没有运气

for (i in names){
  $("#myTable").append("<tr><td>" + names[i].fname +", "+ names[i].lname +"</td>"+
"<td>"+ names[i].age +"</td></tr>"
);
}

我的桌子

<table>
 <tbody id="myTable">
  <tr>
   <th>Name</th>
   <th>Age</th>
  </tr>
 </tbody>
</table>

我的目标是根据每个值的索引将新条目直接附加到对象列表中到 html 表中。

标签： jqueryhtmlarraysjavascript-objects

解决方案

有两个问题。首先，您的输入数据无效：

var names = {
  fname : {"Bill", "John"},
  lname : {"Smith", "Evans"},
  age : {"30", "41"}
}

假设每个都应该是一个数组？例如：fname: ["Bill", "John" ]。

其次，您正在遍历对象的每个键( fname, lname, age)。假设您想遍历每个键的每个值？

只要所有键始终具有相同的长度，您就可以选择第一个fname属性并循环从小0于总长度的一个。

var names = {
  fname: [
    "Bill",
    "John"
  ],
  lname: [
    "Smith",
    "Evans"
  ],
  age: [
    "30",
    "41"
  ]
}

for (var i = 0; i < names.fname.length; i++) {
  $("#myTable").append("<tr><td>" + names.fname[i] + ", " + names.lname[i] + "</td>" +
    "<td>" + names.age[i] + "</td></tr>"
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="myTable">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </tbody>
</table>

推荐阅读