在嵌套数组 JavaScript 上迭代对象

Question

我如何能够遍历这个 JSON api 响应以从“Incident_updates”数组中获取“body”对象？

这是 JSON：

[
    {
        "id": 3787,
        "title": "Dummy title!",
        "start_time": "2020-04-25T16:54:00.000Z",
        "created_at": "2020-04-25T17:22:13.315Z",
        "updated_at": "2020-04-25T17:32:15.364Z",
        "incident_updates": [
            {
                "id": 9905,
                "body": "Dummy Paragraph test!",

我尝试在我的 script.js 文件中使用 .map 和 foreach，但无论我尝试做什么，似乎都没有任何效果，并且我在控制台中收到“未定义的未定义”错误。我还需要从 api 响应中的所有数组中获取 event_updates.body 响应。做类似 event_updates[0].body 的工作，但是我还需要 event_updates[1].body 等的响应。

这是我的 script.js 文件

fetch(url)
.then((response) => {
  if (!response.ok) {
    throw Error("ERROR");
  }
  return response.json();
})
.then((data) => {
  console.log(data);
  const html = data
    .map((item) => {
      console.log(item.incident_updates[0]);
      return `<div class="card card-space">
      <div class="card-body">
      <h5 class="card-title">${item.title}</h5>
      <h6 class="card-subtitle mb-2 text-muted">${item.start_time}</h6>
      <p class="card-text">${item.incident_updates.body}</p> // issues with this
      </div>
      </div>`;
    })
    .join("");

感谢您的帮助！

Answer 1

incident_updates 是一个对象数组，您需要使用 item.incident_updates[0].body 检索其中一项。如果它有多个元素，您应该考虑创建另一个循环并检索它们。

这是一个如何输出所有项目的示例：

fetch(url).then((response) => {
  if (!response.ok) {
    throw Error("ERROR");
  }
  return response.json();
}).then((data) => {
  console.log(data);
  const html = data
    .map((item) => {
      console.log(item.incident_updates[0]);
      return `<div class="card card-space">
            <div class="card-body">
              <h5 class="card-title">${item.title}</h5>
              <h6 class="card-subtitle mb-2 text-muted">${item.start_time}</h6>
              ${item.incident_updates.map(update => `
                <p class="card-text">${update.body}</p>
              `).join('')}
            </div>
          </div>`;
    })
    .join("");
});

---

编辑

如果你只需要item.incident_updates中的第一个，就试试item.incident_updates[0].body

fetch(url).then((response) => {
  if (!response.ok) {
    throw Error("ERROR");
  }
  return response.json();
}).then((data) => {
  console.log(data);
  const html = data
    .map((item) => {
      console.log(item.incident_updates[0]);
      return `<div class="card card-space">
            <div class="card-body">
              <h5 class="card-title">${item.title}</h5>
              <h6 class="card-subtitle mb-2 text-muted">${item.start_time}</h6>
              <p class="card-text">${item.incident_updates[0].body}</p>
            </div>
          </div>`;
    })
    .join("");
});

Answer 2

不完全相同的例子，但在这个例子中你会看到做你需要的逻辑，我使用解构来获取函数参数中的数据并访问数组的第一个值，我使用方括号表示法：

const data = [
  {
    id: 3787,
    title: "Dummy title!",
    start_time: "2020-04-25T16:54:00.000Z",
    created_at: "2020-04-25T17:22:13.315Z",
    updated_at: "2020-04-25T17:32:15.364Z",
    incident_updates: [
      {
        id: 9905,
        body: "Dummy Paragraph 05!",
      },
      {
        id: 9906,
        body: "Dummy Paragraph 06!",
      },
      {
        id: 9907,
        body: "Dummy Paragraph 07!",
      },
    ],
  },
];

const html = data.forEach(({ title, start_time, incident_updates }) => {
  const template = `
    <div class="card card-space">
      <div class="card-body">
        <h5 class="card-title">${title}</h5>
        <h6 class="card-subtitle mb-2 text-muted">${start_time}</h6>
        ${incident_updates
          .map((incident) => `<p class="card-text">${incident.body}</p> `)
          .join(" ")} 
      </div>
    </div>
  `;

  console.log(template);
});