Displaying JSON format response into React-Native

Question

I sent a post request to the server through API upon which I received the following response in JSON format (console.log screenshot):

Upon executing the following code, I was able to Display the response in an Alert dialog box:

uploadPhoto() {
  RNFetchBlob.fetch('POST', 'http://192.168.1.102:8000/api/v1/reader/', {
    Authorization: 'Bearer access-token',
    otherHeader: 'foo',
    'Content-Type': 'multipart/form-data',
  }, [
    { name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
  ]).then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             jsonData: responseJson
           }, () => {
             Alert.alert(" Vehicle Number Plate:  " + responseJson.processed_text);
            console.log(responseJson);
           });
         })
         .catch((error) => {
           console.error(error);
         });
}
<TouchableOpacity
 style={styles.buttonStyle} 
 onPress={this.uploadPhoto.bind(this)}>
<Text style={styles.btnTextStyle}> Process Image</Text>
</TouchableOpacity>

However, Since i am very new to React-Native development, i am unable to display the JSON data in the application other than in the alert dialog box. Following is my code:

Initializing the state of jsonData object through the constructor:

constructor() {
      super();
      this.state = {
        imageSource: null,
        data: null,
        jsonData: []
      };
  }

Thenafter, the state of jsonData object is set (In detail: Code snippet above):

.then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             jsonData: responseJson
           }

Finally, I used the component FlatList for displaying the data:

<View>
   <Text>Display Response JSON Data</Text>
   <FlatList
   data={this.state.jsonData}
   renderItem={({ item }) => <Text> {item.processed_text } </Text>}
   />
</View>

However, I am not able to see the output! How can I solve this problem?

Try to put a console.log inside your then and print what your component is actually seeing. Or override componentDidUpdate(prevProps, prevState) and print the variables — nicecatch
– nicecatch, Commented Mar 28, 2018 at 13:45
@Sarun it help us if you put a console.log(responseJson) below this line .then((responseJson). — Francis Batista
– Francis Batista, Commented Mar 28, 2018 at 13:51
...or I need something better than fetch. Try to use axios. github.com/axios/axios — Francis Batista
– Francis Batista, Commented Mar 28, 2018 at 13:55
FlatList component expects an array. I assume your response is an object and not an array — bennygenel
– bennygenel, Commented Mar 28, 2018 at 13:56

Muhammad Shoaib Riaz · Accepted Answer · 2018-05-15 08:05:16Z

1

Flatlist works on arrays. Your response should be an array like this:

[
 { processed_text: 'value1', owner: { fullname: 'alex' } },
 { processed_text: 'value2', owner: { fullname: 'john' } },
]

for more insights check Flatlist

edited May 15, 2018 at 8:05

answered May 15, 2018 at 8:00

Muhammad Shoaib Riaz

2144 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Displaying JSON format response into React-Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related