Iterate objects over nested array JavaScript

Question

how would I be able to iterate over this JSON api response to get the "body" object from "Incident_updates" array?

Here is the 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!",

I have tried using .map and foreach in my script.js file but no matter what I try and do, nothing seems to work and I get a "undefined undefined" error in the console. I also need to get the incident_updates.body response from all arrays that were in the api response. doing something like incident_updates[0].body works however I also need the responses from incident_updates[1].body etc etc.

This is my script.js file

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

Thanks for your help!

The incident_updates is an array of object, you need to retrieve one of the items using item.incident_updates[0].body. If it has multiple elements, you should consider creating another loop and retrieve them. — Hao Wu
– Hao Wu, Commented Apr 28, 2020 at 2:14
You need to iterate item.incident_updates as well. How do you want each displayed within the HTML you're building? — Phil
– Phil, Commented Apr 28, 2020 at 2:15
@AyushLal I've post an answer, please check if it's what you're looking for. — Hao Wu
– Hao Wu, Commented Apr 28, 2020 at 2:54

Hao Wu · Accepted Answer · 2020-04-28 04:30:49Z

1

The incident_updates is an array of object, you need to retrieve one of the items using item.incident_updates[0].body. If it has multiple elements, you should consider creating another loop and retrieve them.

Here's an example that how you can output all item:

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

Edit

If you only need the first one of the item.incident_updates, just try 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("");
});

edited Apr 28, 2020 at 4:30

answered Apr 28, 2020 at 2:53

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ayush Lal Over a year ago

Wow thanks so much Hao that worked! Although, its returning all body objects per incident_updates array. How will I be able to limit that body response to just 1? ${update.body[0]} but that gives me an undefined error

Oscar Velandia · Accepted Answer · 2020-04-28 03:21:01Z

1

not exactly the same example, but in this example you will see the logic to do what you need, I use destructuring to get the data in the function params and to access the first value of the array, I use square bracket notation:

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

edited Apr 28, 2020 at 3:21

answered Apr 28, 2020 at 2:41

Oscar Velandia

1,1661 gold badge8 silver badges10 bronze badges

1 Comment

Ayush Lal Over a year ago

Thanks so much however how do I structure my foreach loop so that I increments. for example like ${incident_updates[1].body} etc etc?

Collectives™ on Stack Overflow

Iterate objects over nested array JavaScript

2 Answers 2

Edit

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related