在嵌套數組 JavaScript 上迭代對象

Question

我如何能夠迭代此 JSON api 響應以從“Incident_updates”數組中獲取“body” object？

這是 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 響應中的所有 arrays 獲取 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

不完全相同的示例，但在此示例中，您將看到執行所需操作的邏輯，我使用解構來獲取 function 參數中的數據並訪問數組的第一個值，我使用方括號表示法：

 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 是一個 object 數組，您需要使用 item.incident_updates[0].body 檢索其中一項。 如果它有多個元素，您應該考慮創建另一個循環並檢索它們。

這是一個示例，您可以如何 output 所有項目：

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