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
– Zain Shabir, Commented Feb 19, 2019 at 12:08

Asad Marfani · Accepted Answer · 2019-02-19 11:37:20Z

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, 2019 at 11:37

Asad Marfani

1771 gold badge3 silver badges13 bronze badges

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

9 Comments

Zain Shabir Over a year ago

no brother, It's also not working. error is: TypeError: undefined is not an object (evaluating '(responseMsg.data || {}).timings.Fajr')

Asad Marfani Over a year ago

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 ? <Text>{responseMsg.data.timings.Fajr}</Text> : null}

Asad Marfani Over a year ago

Or may be you can save it in variable like : const {data = {}} = responseMsg; const {timings = {}} = data;

Zain Shabir Over a year ago

It is under data > meta > method > name.. {responseMsg.data && responseMsg.data.meta ? <Text>{responseMsg.data.meta.method.name}</Text> : null}..... If i write like this then it's not working

Zain Shabir Over a year ago

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.

|

Atin Singh · Accepted Answer · 2019-02-19 11:32:27Z

1

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

answered Feb 19, 2019 at 11:32

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

2 Comments

Zain Shabir Over a year ago

so how can i write for fetch without .map ?

Atin Singh Over a year ago

No need to use map just access the object directly with responseMsg.data.timings.Fajr.

Ahmad Dawood · Accepted Answer · 2022-03-16 14:07:01Z

0

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

answered Mar 16, 2022 at 14:07

Ahmad Dawood

252 silver badges6 bronze badges

Collectives™ on Stack Overflow

I am getting error while fetching data in react-native

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related