Question

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

这是JSON：

我尝试在script.js文件中使用.map和foreach，但是无论我尝试做什么，似乎都无法正常工作，并且控制台中出现“未定义的未定义”错误。我还需要从api响应中的所有数组获取event_updates.body响应。做类似event_updates [0] .body之类的事情是可行的，但是我还需要来自event_updates [1] .body等的响应。

这是我的script.js文件

[
    {
        "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!",

感谢您的帮助！

Answer 1

并非完全相同的示例，但是在此示例中，您将看到执行所需操作的逻辑，我使用解构来获取函数params中的数据并访问数组的第一个值，我使用方括号表示法：

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);
});

Answer 2

event_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("");
});

通过嵌套数组JavaScript迭代对象

2 个答案:

编辑