I've encountered a problem while using the .map function in JavaScript to extract a nested array from an API response.
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!",
Below is the code I included in 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> // encountering issues with this
</div>
</div>`;
})
.join("");
While item.title and item.start_time work perfectly, item.incident_updates.body does not seem to work at all, displaying as "Undefined" in my HTML file.
Any suggestions on how to properly render data from incident_updates.body?
Appreciate your help!