How to fetch and render object of objects in next js?

Question

I have following code and I am trying to display the data from the object of objects. The error that I receive is TypeError: Cannot read properties of undefined. I understand that the data isn't in the format of 'array of objects', however I still don't know how to properly map it. I would appreciate some help here...

import Layout, { siteTitle } from '../components/layout';
import { useState, useEffect } from 'react'

export default function Home({ allPosts }) {  
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section>
        {Object.values(allPosts.bpi).map(({ section, idx }) => (
          <li className={utilStyles.listItem} key={idx}>
           {section.description}
          <br />
          {section.code}
          <br />
        </li>
        ))}
      </section>
    </Layout>
  );
}

export async function getStaticProps() {
  let data = [];
  let error = "";
  try {
    const res = await fetch(
      "https://api.coindesk.com/v1/bpi/currentprice.json",
    );
    data = await res.json();
  } catch (e) {
    error = e.toString();
  }

  return {
    props: {
      allPosts: data,
      error,
    },
  };
}

Logged data: enter image description here

Object looks like this

{
"chartName": "Bitcoin",
"bpi": {
      "USD": {
           "code": "USD",
           "symbol": "&#36;",
           "rate": "20,220.5728",
           "description": "United States Dollar",
           "rate_float": 20220.5728
      },
     "GBP": {
           "code": "GBP",
           "symbol": "&pound;",
           "rate": "16,896.1488",
           "description": "British Pound Sterling",
           "rate_float": 16896.1488
      },
   }
}

User456 · Accepted Answer · 2022-07-06 10:03:24Z

0

You don't access the USD and GBP objects. You are just getting their names. But you can access them by name like this:

<section>
    {Object.values(allPosts.bpi).map((section, idx) => (
        <li className={utilStyles.listItem} key={idx}>
           {allPosts.bpi[section].description}
            <br />
            {allPosts.bpi[section].code}
            <br />
        </li>
    ))}
</section>

EDIT

It should be section.description instead of allPosts.bpi[section].description. Same for the object code.

<section>
    {Object.values(allPosts.bpi).map((section, idx) => (
        <li className={utilStyles.listItem} key={idx}>
           {section.description}
            <br />
            {section.code}
            <br />
        </li>
    ))}
</section>

edited Jul 6, 2022 at 10:03

answered Jul 6, 2022 at 9:29

User456

1,3117 silver badges16 bronze badges

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

10 Comments

Yevhenii Strilets Over a year ago

I still get 'TypeError: Cannot read properties of undefined' error

User456 Over a year ago

Can you try logging data when you fetch it?

User456 Over a year ago

Also, on what line does that error occur?

Yevhenii Strilets Over a year ago

I added the pic of logged data and the error occurs on the line {allPosts.bpi[section].description} or in my case {section.description}

User456 Over a year ago

Did you change (({ section, idx }) to ((section, idx)? You don't need to destructure it here.

|

silverprize · Accepted Answer · 2022-07-06 16:46:59Z

0

You are using the map method wrong. Try this.

Object.values(allPosts.bpi).map((section, idx) => ....

answered Jul 6, 2022 at 16:46

silverprize

194 bronze badges

Collectives™ on Stack Overflow

How to fetch and render object of objects in next js?

2 Answers 2

EDIT

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related