Kevin Powell - Community•17mo 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•17mo ago

What does the “data” object look like?

redtypoOooOoOP•17mo ago

hi it is in the attached

Jochem•17mo ago

you probably need data.data.attributes...

AparAwasthi•17mo ago

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

redtypoOooOoOP•17mo 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•17mo ago

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

redtypoOooOoOP•17mo 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•17mo ago

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

CodePen

returned object

...

Jochem•17mo ago

redtypoOooOoOP•17mo 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•17mo 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•17mo 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•17mo ago

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

redtypoOooOoOP•17mo ago

yes , one file

Chris Bolson•17mo ago

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

redtypoOooOoOP•17mo ago

how should I change this?

Gaming

Programming

how to read this object?