How to Render Fetched Object Items in React Component

Question

How do I render an object that I've fetched in React?

Here is my code:

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState({});

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(data));
  }, []);

  console.log(data);

  return <div> // Here is where I want my objects to return </div>;
};

Here is what the fetched data returns:

{
  "code": 200,
  "status": "OK",
  "data": {
    "timings": {
      "Fajr": "06:42",
      "Sunrise": "09:00",
      "Dhuhr": "12:13",
      "Asr": "13:17",
      "Sunset": "15:27",
      "Maghrib": "16:00",
      "Isha": "17:29",
      "Imsak": "06:32",
      "Midnight": "00:13"
    }
}

I want to extract "data" and then "timings" and then each respective item and its key. How do I do this in my return statement in my component?

Thanks for any answer in advance

Heartbit · Accepted Answer · 2021-12-27T23:07:33.170

1

By using Object.keys(data):

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState({});

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(data));
  }, []);

  console.log(data);

  return (
  <div>
  {Object.keys(data.timings).map((key, index) =>
    <span key={index}>{key}:{data.timings[key]}</span>
  )}
  </div>
  );
};

Another solution for one time transforming from object to array would be:

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState([]);

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(Object.entries(data.data.timings)));
  }, []);

  console.log(data);

  return (
  <div>
  {data.map(([key, value], index) =>
    <span key={index}>{key}:{value}</span>
  )}
  </div>
  );
};

edited Dec 27 '21 at 23:07

answered Dec 27 '21 at 22:06

Heartbit

1,698
2
14
26

Thanks for the help, much appreciated :D – Mustafa Said Helal Dec 27 '21 at 22:34
1

happy to hear that!! @MustafaSaidHelal – Heartbit Dec 27 '21 at 22:42
Sorry to bother you but I'm still having an issue.. I can't seem to get it to work, I tried your bits of code but I'm still getting errors during runtime :/ Is it because I'm using TypeScript? – Mustafa Said Helal Dec 27 '21 at 22:56
1

no problem at all. what is the issue? – Heartbit Dec 27 '21 at 22:59
It keeps saying 'Cannot find name key' and 'Cannot find name index' :/ Is it because I'm using TypeScript? Should I go with regular JS? – Mustafa Said Helal Dec 27 '21 at 23:00
which one do you use? first or second? Do you have the right type annotations in your state? – Heartbit Dec 27 '21 at 23:04
Second one :) Thank you – Mustafa Said Helal Dec 27 '21 at 23:05
I fixed, see the last updates – Heartbit Dec 27 '21 at 23:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240492/discussion-between-heartbit-and-mustafa-said-helal). – Heartbit Dec 27 '21 at 23:11

score 1 · Answer 2 · answered Dec 27 '21 at 22:07

You should return {data.data.timings.Fajr},{data.data.timings.Sunrise},... if your component directly displays the data. If your component only returns the data, that needs to be displayed in another component, you should type: return data.data.timings;

How to Render Fetched Object Items in React Component

2 Answers2