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"
            }
        }
    },

score 1 · Accepted Answer · answered May 13 '20 at 17:00

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.

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 — Blondish, May 14 '20 at 09:19
@Blondish Can you check your cryptos JSON. Error is because it doesn't have quote as key — Shiladitya, May 14 '20 at 10:00
This did work.. I had to remove the dummy data that was messing things up :) — Blondish, May 14 '20 at 21:39

Yanick Rochon · Answer 2 · 2020-05-13T17:08:24.117

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>

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? — Blondish, May 14 '20 at 09:21

How can I render data within nested objects in react?

2 Answers2