Displaying JSON format response into React-Native - json

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?

Answer 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