how to read this object?

async function fetchData() {
const response = await fetch('http://localhost:1337/api/products/1?populate=*');
const data = await response.json();
console.log(data); }

fetchData();
const data = fetchData()
async function fetchData() {
const response = await fetch('http://localhost:1337/api/products/1?populate=*');
const data = await response.json();
console.log(data); }

fetchData();
const data = fetchData()
I will put the return into img:
<div>
{/* <img style={{ width: 300 }} src={`http://localhost:1337/uploads/IMG_b34359.PNG`} alt="" /> */ //this works}
<img style={{ width: 300 }} src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`} alt="" /> //this has error:Cannot read properties of undefined (reading 'attributes')
</div>
<div>
{/* <img style={{ width: 300 }} src={`http://localhost:1337/uploads/IMG_b34359.PNG`} alt="" /> */ //this works}
<img style={{ width: 300 }} src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`} alt="" /> //this has error:Cannot read properties of undefined (reading 'attributes')
</div>
the other way of reading the returned object:
<img style={{ width: 300 }} src={`http://localhost:1337${data.attributes.img.data.attributes.url}`} alt="" />
{/* error: TypeError: Cannot read properties of undefined (reading 'img') */}
<img style={{ width: 300 }} src={`http://localhost:1337${data.attributes.img.data.attributes.url}`} alt="" />
{/* error: TypeError: Cannot read properties of undefined (reading 'img') */}
the attached is the returned object or check it in codepen: https://codepen.io/Kiki-Overhere/pen/bGQLwvN
16 Replies
Chris Bolson
Chris Bolson16mo ago
What does the “data” object look like?
redtypoOooOo
redtypoOooOo16mo ago
hi it is in the attached
Jochem
Jochem16mo ago
you probably need data.data.attributes...
AparAwasthi
AparAwasthi16mo ago
You would also need to return the data from fetchData function.
redtypoOooOo
redtypoOooOo16mo ago
I tried, src={http://localhost:1337${data.data.attributes.img.data.attributes.url}} alt="" /> //this has error:Cannot read properties of undefined (reading 'attributes')
Chris Bolson
Chris Bolson16mo ago
It would easier if yoo provided a sample. Most people won’t open random attachments
redtypoOooOo
redtypoOooOo16mo ago
as this: const data = await response.json();return data? I did, have the same error T T thanks, i put it in codepen
Jochem
Jochem16mo ago
redtypoOooOo
redtypoOooOo16mo ago
thanks, so I log data.data.attributes.img.data.attributes.url, it has the right info /uploads/IMG_1387_b3007e4359.PNG, but I passed into
src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`}
src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`}
, it has error: TypeError: Cannot read properties of undefined (reading 'attributes')
Jochem
Jochem16mo ago
you'll have to share more of the code then also, this is double:
fetchData();
const data = fetchData()
fetchData();
const data = fetchData()
you're fetching twice, discarding the first result
redtypoOooOo
redtypoOooOo16mo ago
this is all the code, i made it simple to test for this error I used useFetch too but it gives me the same error when it is passed into src
Jochem
Jochem16mo ago
I assume the img tag and the fetchData call are in the same file?
redtypoOooOo
redtypoOooOo16mo ago
yes , one file
Chris Bolson
Chris Bolson16mo ago
As @aparawasthi pointed out, as far as I can tell, your function fetchData isn’t returning anything.
redtypoOooOo
redtypoOooOo16mo ago
how should I change this?
Want results from more Discord servers?
Add your server