使用 Map() function 提取带有 ReactJS 的双嵌套 JSON 数据

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

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