Question

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

我的对象

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表中的对象列表中。

Answer 1

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

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>

附加一个对象列表，其值中包含数组

1 个答案: