How can I return response.data if its an Object, not an array? map doesnt work with the code I have below

user_15138803 0
Viewed 513

I am attempting to map thhrough some response.data that I fetched using axios. the API data looks like this.... Yes I am aware you cannot map through an object. I figured out that this isnt an array, its an object and thats why map must not be working right? So how would I be able to display the data I want out of this object then in the return statement? This is what I have so far.... ps. All off the youtube videos and articles ive found on stackoverflow dont seem to be specific enough in answering this question. And the youtube videos seem to only ever cover mapping through response.data that comes in the from of an Array.

import React, { useEffect, useState } from "react";
import axios from "axios";
export default function App() {
  const [info, setInfo] = useState([]);

  useEffect(() => {
    axios
      .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then((response) => setInfo(response.data));
  });

  return (
    <div>
      {info.map((item) => (
        <p>{item.description}</p>
      ))}
    </div>
  );
}```

JSON response 

```{time: Object, disclaimer: "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org", chartName: "Bitcoin", bpi: Object}```
reactjs mapping object arrays
2 Answers

If info is an object, something like:

const info = {
  time: '2021-03-18T22:00:33.170Z',
  disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index ...',
  chartName: 'Bitcoin',
  bpi: 'some bpi value',
}

then you can use Object.keys and map:

return (
  <div>
    {Object.keys(info).map((key) => (
      <p key={key}>
        {key}: {info[key]}
      </p>
    ))}
  </div>
)

So,Object.keys(info) return array of its keys: ['time', 'disclaimer', 'chartName', 'bpi'], now you can map over it and read values using dynamic property syntax as info[key].

Edit:

If info has some nested objects like:

const info = {
  bpi: {
    '2013-04-01': 1,
    '2013-05-02': 2,
    '2013-06-03': 3,
    '2013-07-04': 4,
    '2013-08-05': 5,
  },
  disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index ...',
  time: {
    updated: 'Sep 10, 2011 00:03:00 UTC',
    updatedISO: '2011-09-10T00:03:00+00:00',
  },
}

then you can render it at UI as:

<div>
  <p>BPI:</p>
  {Object.keys(info.bpi).map((key) => (
    <p key={key}>
      {key}: {info.bpi[key]}
    </p>
  ))}
</div>
<p>Updated Time: {new Date(info.time.updatedISO).toLocaleDateString()}</p>
<p>Disclaimer: {info.disclaimer}</p>
user_28735380

Okay, firstly, thank you Ajeet Shah for your time and helping me figure this out. Although we were getting errors earlier you led me on the right path which is more helpful in the greater scheme of things than giving me an answer. That being said, this gave me an opportunity to learn about Object.keys and how it works in displaying an array of Object's property names. Here is the start of the code...ill be iterating through more of the object keys later but for now I wanted to show you that I got it...

import React, { useEffect, useState } from "react";
import axios from "axios";
export default function App() {
  const [info, setInfo] = useState(
    {time: {}, chartname: {}} 
  );

  useEffect(() => {
    axios
      .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      .then((response) => setInfo(response.data));
  }, []);

  return (
    <div>
     <p>BPI:</p>
  {Object.keys(info.time).map((key) => (
    <p key={key}>
      {key}: {info.time[key]}
    </p>
  ))}
    </div>
  );
}```

no ERRORS!  Woo!
user_151388030
Related