javascript - .map() 嵌套数组不工作 JavaScript

Question

我在使用 JavaScript 中的 .map 函数从 api 响应中提取嵌套数组时遇到问题。

这是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 文件放在一起的代码：

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

无论出于何种原因，其他一切都可以正常工作，例如 item.title 和 item.start_time 但是item.incident_updates.body根本不起作用，并且在我的 HTML 文件中显示“未定义”。

我如何能够从 event_updates.body 渲染数据？

多谢你们！

标签： javascriptjson

Answer 1

由于 item.incident_updates 是一个数组，因此您可以使用 map

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((data)={return(<p class="card-text">${data.body}</p>)})}
  </div>
  </div>`;
})