jsonreact-nativereact-native-flatlistreact-native-listview

Displaying JSON format response into React-Native


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

Response recieved from server 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?


Solution

  • 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