Using Map() function to pull out double nested JSON data with ReactJS

Question

I'm trying to pull out the individual images in the "images" object below under "details" section.

Seem to just be getting nothing printing out. Looking for the correct way to pull within the details.images.image1,2, or 3.

Here is the JSON data I'm working with so far:

{
  "books": [
    {
      "title": "title 1",
      "image": "/image1.jpg"
    },
    {
      "title": "title 2",
      "image": "/image2.jpg"
    }
  ],
  "details": [
    {
      "author": "book author",
      "name": "Book name",
      "price": 34.99,
      "publisher": "Penguin Books",
      "images": [
        {
          "image1": "/image1.jpg",
          "image2": "/image2.jpg",
          "image3": "/image3.jpg"
        }
      ]
    }
  ]
}

Also here is the JSON call I'm making in a Book component:

{staticdata.details.map(detail => (
  <Book
    book_name={detail.author}
    book_price={detail.price}
    image={detail.images.image1}
  />
))}

For some reason, images is an array of a single element. You want to access detail.images[0].image1. — Bergi
– Bergi, Commented Nov 3, 2019 at 23:43

Nick · Accepted Answer · 2019-11-04 00:05:44Z

1

Here's an example of accessing those nested properties and logging them to the console. It appears your attempt was mostly correct, but images is an array.

const data = {
  "books": [
    {
      "title": "title 1",
      "image": "/image1.jpg"
    },
    {
      "title": "title 2",
      "image": "/image2.jpg"
    }
  ],
  "details": [
    {
      "author": "book author",
      "name": "Book name",
      "price": 34.99,
      "publisher": "Penguin Books",
      "images": [
        {
          "image1": "/image1.jpg",
          "image2": "/image2.jpg",
          "image3": "/image3.jpg"
        }
      ]
    }
  ]
}

data.details.map(detail => {
  console.log(detail.author, detail.price, detail.images[0].image1);
});

answered Nov 4, 2019 at 0:05

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Using Map() function to pull out double nested JSON data with ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related