cant map over and fetch the data present inside an array of objects

Question

I had an assignment which i was not able to do since i was busy but out of curiosity I am trying to do it. I have this api https://dev-api.fitnessfuel360.com/app/home from which i am trying to get the items and the data present in it. I am currently trying to use Nextjs in which axios is being used. this is what my code looks like as of now.

//Index.js file where Base_url is the api
  const { items } = await axios.get(Base_URL);

    return {
        props: { items: items },
    };
}

I am then passing Items to the the component where i want to render out the data present inside of the items array.

//my productSection.js component
   <div>
                {items.map((items) => (
                    <h1>{items.slug}</h1>
                ))}
            </div>

However this gives me an error saying Error: Error serializing `.items` returned from getServerSideProps in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

So how do i access the information inside of this Items array? There were some points mentioned in the assignment as well like object has 2 properties type and data. Type key decides which component to render and data will be passed to to the component and Code should not throw error on invalid types in json I Have not used key to render out component before so this goes over my head. Please understand that I am still a beginner so yeah, Please let me know what to do here and how to achieve this. Thank you for your time.

please post proper code and also format your question correctly — X3R0
– X3R0, Commented Nov 2, 2021 at 15:46

lpizzinidev · Accepted Answer · 2021-11-02 15:46:58Z

2

axios return a response object with a data property, try to change your code like this

 const { data } = await axios.get(Base_URL);

    return {
        props: { items: data.items },
    };
}

answered Nov 2, 2021 at 15:46

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manshul Duggal Over a year ago

ok now there is another error saying "Error: Error serializing .items returned from getServerSideProps in "/". Reason: undefined cannot be serialized as JSON. Please use null or omit this value. " it just keeps getting better... there are objects inside of the array for sure

lpizzinidev Over a year ago

@ManshulDuggal Can you please post the result of a console.log(data) to see the structure of the API response?

Collectives™ on Stack Overflow

cant map over and fetch the data present inside an array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related