As a beginner in React-Native and Javascript, I'm trying to figure out how to retrieve data for my FlatList. The JSON format I receive is structured like this:
[
{
"18": {
"sellingUnitName": "unité(s)",
"qualifier": "GOOD",
"sizeQualifierName": "gr.20"
},
"19": {
"sellingUnitName": "unité(s)",
"qualifier": "BAD",
"sizeQualifierName": "gr.18-20"
}
}
]
This is what my FlatList currently looks like:
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text>{item.sellingUnitName}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
The FlatList works well with the simpler format shown below:
[
{
"sellingUnitName": "unité(s)",
"qualifier": "GOOD",
"sizeQualifierName": "gr.20"
},
{
"sellingUnitName": "unité(s)",
"qualifier": "BAD",
"sizeQualifierName": "gr.18-20"
}
]
My question is: How can I access the values in the first nested format by looping through each item and ignoring the first id (for example "18" in the first example)? I want to be able to use item.keyName in my FlatList to display each value but I am struggling to access the nested elements.
Additionally, here's how I fetch my data:
fetch('https://www.mywebsite.com/test.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson
};
})
.catch((error) => {
console.error(error);
});
Any help would be appreciated. Thank you!