Kevin Powell - Community•2y ago

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

CodePen

returned object

...

message.txt

16 Replies

Chris Bolson•2y ago

What does the “data” object look like?

redtypoOooOoOP•2y ago

hi it is in the attached

Jochem•2y ago

you probably need data.data.attributes...

AparAwasthi•2y ago

You would also need to return the data from fetchData function.

redtypoOooOoOP•2y 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•2y ago

It would easier if yoo provided a sample. Most people won’t open random attachments

redtypoOooOoOP•2y ago

as this: const data = await response.json();return data? I did, have the same error T T thanks, i put it in codepen

redtypoOooOoOP•2y ago

https://codepen.io/Kiki-Overhere/pen/bGQLwvN

CodePen

returned object

...

Jochem•2y ago

redtypoOooOoOP•2y 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•2y 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

redtypoOooOoOP•2y 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•2y ago

I assume the img tag and the fetchData call are in the same file?

redtypoOooOoOP•2y ago

yes , one file

Chris Bolson•2y ago

As @aparawasthi pointed out, as far as I can tell, your function fetchData isn’t returning anything.

redtypoOooOoOP•2y ago

how should I change this?

Gaming

Programming

how to read this object?

Did you find this page helpful?