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 } }) => (
<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))));
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'
}
}
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 (
<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>