javascript - 无法让我的 JavaScript 对象出现在单独的列中

Question

我无法让我的 2 个 Javascript 对象出现在 DOM 的不同列中。我应该有一个 2 列页面，在一侧显示第一人称详细信息，在另一侧显示第二人称详细信息

我试过使用循环附加到我创建的 div 列。我在正文中有一个 div 容器，其中有两个单独的 id 要附加到。

sabio.page.startUp = () => {

  people = [{
      "firstName": "John",
      "lastName": "Doe",
      "age": 23,
      "streetAddress": "123 Main St.",
      "city": "Culver City",
      "state": "CA",
      "zip": 92340
    },
    {
      "firstName": "Juan",
      "lastName": "Doe",
      "age": 47,
      "streetAddress": "123 Main St.",
      "city": "Culver City",
      "state": "CA",
      "zip": 92340
    }
  ]
  console.log(people);

  sabio.page.mapObjFunc(people);
}



sabio.page.mapObjFunc = person => {
  for (let i = 0; i < people.length; i++) {

    console.log(i);
    $("#div" + i).append("<h1>" + i + ": " + people[i] + "</h1>");
    people[i] + "<br>";
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-6" id="div0">
      <h1>Column 1</h1>
    </div>
    <div class="col-sm-6" id="div1">
      <h1>Column 2</h1>
    </div>
  </div>
</div>

预期的结果是我的 2 人对象出现在 DOM 的两个单独的列中。使用我的代码时，我没有收到任何错误消息。

Answer 1

people 数组中的元素是对象。您需要枚举每个对象的属性。这是修改后的代码:

for (let i = 0; i < people.length; i++) {
  let p = people[i];
  let info = '<div>';
  for (let k in p) {
     info += k + ' ' + p[k] + '<br>'
  }
  info += '</div>';
  $("#div" + i).append("<h1>" + i + ": " + info + "</h1>");
}