I am getting error while fetching data in react-native

Question

Here is the API link:

http://api.aladhan.com/v1/timingsByCity?city=Dubai&country=United%20Arab%20Emirates&method=8

<Text>{responseMsg.code}</Text>
<Text>{responseMsg.status}</Text>

The above lines are working. I am able to fetch data from this API like, code, status but I am unable to fetch prayer times from this API. I don't know how to write that line to fetch prayer times from this API.

<Text>{(responseMsg.data || []).map(time => time.timings.Fajr)}</Text>
<Text>{(responseMsg.data || []).map(time => time.timings.Dhuhr)}</Text>

I am getting the following error:

TypeError: undefined is not an object
(evaluating '(responseMsg.data || {}).timings.Fajr')

error is: TypeError: undefined is not an object (evaluating '(responseMsg.data || {}).timings.Fajr') — Zain Shabir, Feb 19 '19 at 12:08

score 2 · Accepted Answer · answered Feb 19 '19 at 11:37

2

You should directly access the timings because data field is object and not an array. What you have to write is :

<Text>{(responseMsg.data || {}).timings.Fajr}</Text>

answered Feb 19 '19 at 11:37

Asad Marfani

177
3
13

no brother, It's also not working. error is: TypeError: undefined is not an object (evaluating '(responseMsg.data || {}).timings.Fajr') – Zain Shabir Feb 19 '19 at 12:08
Ohh yes! Because timings key is undefined when data is fetching. May be you can wrap it in ternary like this `{responseMsg.data && responseMsg.data.timings ? {responseMsg.data.timings.Fajr} : null} ` – Asad Marfani Feb 19 '19 at 12:10
Or may be you can save it in variable like : `const {data = {}} = responseMsg; const {timings = {}} = data;` – Asad Marfani Feb 19 '19 at 12:13
It is under data > meta > method > name.. {responseMsg.data && responseMsg.data.meta ? {responseMsg.data.meta.method.name} : null}..... If i write like this then it's not working – Zain Shabir Feb 19 '19 at 12:20
It worked now brother. thanks for helping. last thing if you can help. i am using geolocation. how can i set geolocation in api link. because api accept city name and geolocation fetches only latitude and longitude. – Zain Shabir Feb 19 '19 at 12:26
you can add a key in the **data** object like : `data.location = { lat: '' // Latitude value, long: '' //Longitude value }` – Asad Marfani Feb 19 '19 at 12:30
brother, can you share your skype id? – Zain Shabir Feb 19 '19 at 12:31
timings are in format like 19:27, can it be like 7:27 pm ? – Zain Shabir Feb 19 '19 at 12:46
You can refer to this answer https://stackoverflow.com/questions/13898423/javascript-convert-24-hour-time-of-day-string-to-12-hour-time-with-am-pm-and-no – Asad Marfani Feb 19 '19 at 12:50

score 1 · Answer 2 · answered Feb 19 '19 at 11:32

1

.Map on responseMsg.data won't work as data is an object. Map is a function on arrays not object.

answered Feb 19 '19 at 11:32

Atin Singh

3,624
2
18
25

so how can i write for fetch without .map ? – Zain Shabir Feb 19 '19 at 12:09
No need to use map just access the object directly with `responseMsg.data.timings.Fajr`. – Atin Singh Feb 19 '19 at 12:22

score 0 · Answer 3 · answered Mar 16 '22 at 14:07

I know that my answer is sooo late ,since i was searching for the same issue

the trick is that in the output json nested objects,ther is another child data object so to access prayers times :

fajr=response.data.data.timings.fajr

yes data.data

timezone=response.data.data.meta.timezone
hijriDay=response.data.data.date.hijri.day
hijriMonth=response.data.data.date.hijri.month.en
hijriYear=response.data.data.date.hijri.year

I am getting error while fetching data in react-native

3 Answers3