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

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=&auto=format&fit=crop&w=500&q=60",
                                "hash": "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3",
                                "ext": ".1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw=&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 } }) => (
    <div key={item.id}>
      <Product
        data={data}
        name={name}
        description={description}
        price={price}
      />
    </div>
  ));
}

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

CodePudding user response：

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=&auto=format&fit=crop&w=500&q=60", hash: "thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3", ext: ".1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw=&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 (
    <div>
      {item.map(
        ({
          attributes: {
            image: {
              data: [
                {
                  attributes: {
                    formats: {
                      thumbnail: { url }
                    }
                  }
                } = {
                  attributes: {
                    formats: { thumbnail: { url: "default_image_url" } }
                  }
                }
              ]
            }
          }
        }) => {
          console.log(url);
        }
      )}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

CodePudding user response：

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=&auto=format&fit=crop&w=500&q=60',
  hash: 'thumbnail_photo_1544716278_ca5e3f4abd8c_ixlib_rb_1_2_54b5c38ad3',
  ext: '.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Ym9va3xlbnwwfHwwfHw=&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'
  }
}