How do I consume this json in React?

Asked

Viewed 160 times

0

react-native

  • Welcome Eduardo. In order for it to be easier for someone to help you solve the problem you are facing it would be better for you to create a Minimum, Complete and Verifiable Example. Edit your question and add the code you’re developing and specify exactly what the difficulty is having.

1 answer

1


I haven’t tested it here, but I believe it solves: Make the request with Xios or fetch, can be done for example in IdMount:

componentDidMount() {
   fetch('https://facebook.github.io/react-native/movies.json', { method: 'GET' })
     .then(response => response.json())
     .then(json => this.setState({ data: json }))
}

So you’ll have the list in the States ready to be rendered on Flatlist:

<FlatList
  data={data.movies}
  renderItem={({ item }) => (
    <TouchableHighlight
      onPress={() => this._onPress(item)}
    >
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
        <Text>{item.releaseYear}</Text>
      </View>
    </TouchableHighlight>
  )}
  keyExtractor={item => item.id}
/>

See the documentation for more questions: https://facebook.github.io/react-native/docs/flatlist Tip: React-Native-Elements is a great library to create flatlists, take a look at it.

  • To complement, in the React Native documentation, the example of the use of fetch is exactly the answer to the question. You can access: link

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.