how to access deeply nested image object with map method in reactjs?

Question

I have this object which I was able to map through and destructure but I haven't been able to figure out how to access the image in the same map. I assume I need to map through this separately however, I'm not sure.

This is the object

{
    "attributes": {
        "image": {
            "data": [
                {
                    "attributes": {
                        "formats": {
                            "thumbnail": {
                                "name": "thumbnail_https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                                "hash": "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3",
                                "ext": ".1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                                "mime": "image/jpeg",
                                "path": null,
                                "width": 208,
                                "height": 156,
                                "size": 3.73,
                                "url": "https://res.cloudinary.com/detsckagz/image/upload/v1647627150/thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3.jpg",
                                "provider_metadata": {
                                    "public_id": "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3",
                                    "resource_type": "image"
                                }
                            }
                        }
                    }
                }
            ]
        },
        "name": "poznan",
        "description": "hey",
        "price": 9.99,
        "quantity": 0
    }
}

JSX - this works fine.

{
  item?.map(({ attributes: { name, description, price } }) => (
    
      
    
  ));
}

This is what I have tried doing but this obviously returns undefined.

console.log(item.map(({attributes:{image:{data:{attributes}}}})=> (console.log(attributes))));

I tried doing it like this

and the error I get is can't read property of formats

console.log(item.map(({attributes:{image:{data:{attributes:{formats:{thumbnail:{url}}}}}}})=> (console.log(url))));

user_7922279 · Answer

I am not exactly sure what you are asking for.

Is this helpful?

item.attributes.image.data.map(({attributes: {formats: {thumbnail}}}) => console.log(thumbnail))

it returns this object:

  {
  name: 'thumbnail_https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
  hash: 'thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3',
  ext: '.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
  mime: 'image/jpeg',
  path: null,
  width: 208,
  height: 156,
  size: 3.73,
  url: 'https://res.cloudinary.com/detsckagz/image/upload/v1647627150/thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3.jpg',
  provider_metadata: {
    public_id: 'thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3',
    resource_type: 'image'
  }
}

user_8510405 · Answer

You have missed that the image is inside an array as the first item. In that case, you need to do an Array destructuring.

Try like below.

var item = [ { attributes: { image: { data: [ { attributes: { formats: { thumbnail: { name: "thumbnail_https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", hash: "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3", ext: ".1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", mime: "image/jpeg", path: null, width: 208, height: 156, size: 3.73, url: "https://res.cloudinary.com/detsckagz/image/upload/v1647627150/thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3.jpg", provider_metadata: { public_id: "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3", resource_type: "image" } } } } } ] }, name: "poznan", description: "hey", price: 9.99, quantity: 0 } }, { attributes: { image: { data: [] }, name: "poznan", description: "hey", price: 9.99, quantity: 0 } } ];

function App() {
  return (
    
      {item.map(
        ({
          attributes: {
            image: {
              data: [
                {
                  attributes: {
                    formats: {
                      thumbnail: { url }
                    }
                  }
                } = {
                  attributes: {
                    formats: { thumbnail: { url: "default_image_url" } }
                  }
                }
              ]
            }
          }
        }) => {
          console.log(url);
        }
      )}
    
  );
}

ReactDOM.render(, document.getElementById("root"))

how to access deeply nested image object with map method in reactjs?

2 Answers