REACT NATIVE: How to fetch API JSON data in RN

Question

I am trying to fetch JSON data from this API: 'https://dog.ceo/api/breeds/list/all' I have tried several times even from official docs, but nothing helped , i am not getting error but nthing shows onn screen

 useEffect(() => {
    fetch('https://dog.ceo/api/breeds/list/all')
      .then((response) => response.json())
      .then((json) => setData(json.message))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

   
  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.message}  ghbdt </Text>
                      )}
        />
      )}
    </View>

Coder · Accepted Answer · 2021-02-12 15:28:54Z

1

you can try using async and call handleData on an event click or using useEffect as well. Hope this way helps you.

async handleData() {
axios.get('https://dog.ceo/api/breeds/list/all')
  .then((response) => response.json())
  .then((json) => setData(json.message))
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));
  }

Another way maybe you can try passing data in array dependency useEffect[].

answered Feb 12, 2021 at 15:28

Coder

593 bronze badges

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

1 Comment

Feliks_JS Over a year ago

sorry but where should i put it??

Alistair Nelson · Accepted Answer · 2021-02-12 16:49:42Z

0

The problem you are hitting is the return from the API is an object not an array:

{"message":{"affenpinscher":[],"african":[],"airedale":[]...}}

To make this work for you you will need to turn the returned data in to an array, if all you are after is the key value and not the values in the arrays then you could just change your setData to setData(Object.keys(json.message)); this will then give you a list of dogs out.

answered Feb 12, 2021 at 16:49

Alistair Nelson

3,3231 gold badge19 silver badges16 bronze badges

Collectives™ on Stack Overflow

REACT NATIVE: How to fetch API JSON data in RN

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related