Tengo este objeto que pude mapear y desestructurar, pero no he podido averiguar cómo acceder a la imagen en el mismo mapa. Supongo que necesito mapear esto por separado, sin embargo, no estoy seguro.
este es el objeto
{ "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: esto funciona bien.
{ item?.map(({ attributes: { name, description, price } }) => ( <div key={item.id}> <Product data={data} name={name} description={description} price={price} /> </div> )); }Esto es lo que he intentado hacer pero esto obviamente devuelve indefinido.
console.log(item.map(({attributes:{image:{data:{attributes}}}})=> (console.log(attributes))));Intenté hacerlo así
y el error que recibo es que no se puede leer la propiedad de los formatos
console.log(item.map(({attributes:{image:{data:{attributes:{formats:{thumbnail:{url}}}}}}})=> (console.log(url))));No estoy exactamente seguro de lo que estás pidiendo.
¿Es esto útil?
item.attributes.image.data.map(({attributes: {formats: {thumbnail}}}) => console.log(thumbnail))devuelve este objeto:
{ 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' } }Te has perdido que la imagen está dentro de una matriz como el primer elemento. En ese caso, debe hacer una desestructuración de matriz .
Prueba como a continuación.
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>