How can I render data within nested objects in react?

Question

I am working with an API that contains nested objects and I am not sure how to display it. I am reading about using Object.keys but not sure how to do it... help please...

Here is the react code. I need to render prices dynamically.

<div>
  <Table responsive striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>% Change</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody>
      {Object.keys(
        cryptos.map(crypto => (
          <tr key={crypto.id}>
            <td>{crypto.cmc_rank}</td>
            <td>
              <Link to={`/crypto/${crypto.id}`}>{crypto.name}</Link>
            </td>
            <td>{crypto.symbol}</td>
            <td>{`price should be displayed here `}</td>
            <td>{`price change should be displayed here `}</td>
            <td>{`market cap should be displayed here `}</td>
          </tr>
        ))
      )}
    </tbody>
  </Table>
</div>

Here is the data source

"data": [
    {
        "id": 1,
        "name": "Bitcoin",
        "symbol": "BTC",
        "slug": "bitcoin",
        "num_market_pairs": 8203,
        "date_added": "2013-04-28T00:00:00.000Z",
        "tags": [
            "mineable"
        ],
        "max_supply": 21000000,
        "circulating_supply": 18376356,
        "total_supply": 18376356,
        "platform": null,
        "cmc_rank": 1,
        "last_updated": "2020-05-13T10:30:30.000Z",
        "quote": {
            "USD": {
                "price": 8920.68810523,
                "volume_24h": 40828691066.513,
                "percent_change_1h": 0.107841,
                "percent_change_24h": 1.62343,
                "percent_change_7d": -2.5838,
                "market_cap": 163929740386.67194,
                "last_updated": "2020-05-13T10:30:30.000Z"
            }
        }
    },

Shiladitya · Accepted Answer · 2020-05-13 17:00:45Z

1

Here you go with a solution

<div>
  <Table responsive striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>% Change</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody>
      { 
        cryptos.length &&
        cryptos.map(crypto => (
          <tr key={crypto.id}>
            <td>{crypto.cmc_rank}</td>
            <td>
              <Link to={`/crypto/${crypto.id}`}>{crypto.name}</Link>
            </td>
            <td>{crypto.symbol}</td>
            <td>{crypto.quote.USD.price}</td>
            <td>{crypto.quote.USD.price * crypto.quote.USD.percent_change_1h}</td>
            <td>{crypto.quote.USD.market_cap}</td>
          </tr>
        )
      )}
    </tbody>
  </Table>
</div>
Here is the data source

"data": [
    {
        "id": 1,
        "name": "Bitcoin",
        "symbol": "BTC",
        "slug": "bitcoin",
        "num_market_pairs": 8203,
        "date_added": "2013-04-28T00:00:00.000Z",
        "tags": [
            "mineable"
        ],
        "max_supply": 21000000,
        "circulating_supply": 18376356,
        "total_supply": 18376356,
        "platform": null,
        "cmc_rank": 1,
        "last_updated": "2020-05-13T10:30:30.000Z",
        "quote": {
            "USD": {
                "price": 8920.68810523,
                "volume_24h": 40828691066.513,
                "percent_change_1h": 0.107841,
                "percent_change_24h": 1.62343,
                "percent_change_7d": -2.5838,
                "market_cap": 163929740386.67194,
                "last_updated": "2020-05-13T10:30:30.000Z"
            }
        }
    },

Price changed I have considered percent_change_1h * price. Check for cryptos.length before doing map operation.

answered May 13, 2020 at 17:00

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

4 Comments

Blondish Over a year ago

Thank you for the response. I tried the above solution before I posted the question here, it does not work... table.jsx:28 Uncaught TypeError: Cannot read property 'USD' of undefined

Shiladitya Over a year ago

@Blondish Can you check your cryptos JSON. Error is because it doesn't have quote as key

Blondish Over a year ago

"quote": { "USD": { "price": 8920.68810523,

Blondish Over a year ago

This did work.. I had to remove the dummy data that was messing things up :)

Yanick Rochon · Accepted Answer · 2020-05-13 17:08:24Z

0

I have no idea why you have {Object.keys( in there... remove it.

<div>
  <Table responsive striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>% Change</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody>
      { cryptos.map(crypto => (
        <tr key={crypto.id}>
          <td>{crypto.cmc_rank}</td>
          <td>
            <Link to={`/crypto/${crypto.id}`}>{crypto.name}</Link>
          </td>
          <td>{crypto.symbol}</td>
          <td>{`price should be displayed here `}</td>
          <td>{`price change should be displayed here `}</td>
          <td>{`market cap should be displayed here `}</td>
        </tr>
      )) }
    </tbody>
  </Table>
</div>

Having Object.keys() essentially returns an array containing the indexes of the array you map from cryptos. React needs an array of elements, so you just need iterate through the elements of cryptos, and map each item to something React can render.

For example:

const dataList = [{ key:'a', value:'Hello' }, { key:'b', value:'World' }];

<div>
  { dataList.map(data => <div key={ data.key }>{ data.value }</div>) }
</div>

Will render

<div>
  <div>Hello</div>
  <div>World</div>
</div>

edited May 13, 2020 at 17:08

answered May 13, 2020 at 17:01

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

1 Comment

Blondish Over a year ago

Thank you for your response. I removed Object.keys(). How would the example you are referring to above be applied in my case? could you walk me through?

Collectives™ on Stack Overflow

How can I render data within nested objects in react?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related