How to display nested JSON Data in FlatView
I'm parsing a JSON file that contains data on a restaurant including a few menu items. The issue I am having is that I am attempting to display all nested data entries (fooditems) in a Flatview but all that is being shown are 2 entries. The last fooditem entry in the first restaurant record, and the last fooditem entry in the second restaurant record.
JSON Snippet;
[
{
"id": 1,
"title": "The Lock Inn (££)",
"style": "Pub - Seafood - Vegan Options",
"information": "A small and cosy pub, with original features, and a roaring log-fire. Their Fish ‘n’ chips are a local favorite, as is the ‘Cullen Skink’, a smoked-haddock soup.",
"image": "../assets/Images/Info-Welcome.png",
"rating": "4",
"menu": {
"fooditem": {
"name": "Local Butchers Haggis",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "With a Rob Roy Whisky & Mustard Sauce",
"price": "7.25"
},
"fooditem": {
"name": "Highland Oak Smoked Salmon",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "Finest Scottish Salmon",
"price": "7.25"
},
"fooditem": {
"name": "Fresh Homemade Soup of the Moment",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "Garnished with Roasted Peppers",
"price": "7.25"
},
}
},
{
"id": 2,
"title": "Other Pub (£)",
"style": "Pub - Seafood - Vegan Options",
"information": "A small and cosy pub, with original features, and a roaring log-fire. Their Fish ‘n’ chips are a local favorite, as is the ‘Cullen Skink’, a smoked-haddock soup.",
"image": "../assets/Images/Info-Welcome.png",
"rating": "5",
"menu": {
"fooditem": {
"name": "Fresh Buckie Haddock",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "Deep Fried",
"price": "7.25"
},
"fooditem": {
"name": "Home-Made Steak Pie",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "It's 95% meat",
"price": "7.25"
},
"fooditem": {
"name": "Houmous",
"image" : "../assets/Images/Info-Welcome.png",
"description" : "Smooth and Rich",
"price": "7.25"
},
}
},
]
And my JSX
constructor() {
super();
this.state = {
data: [],
show: true,
};
}
componentDidMount() {
this.setState({ data : this.infoFile })
}
renderRow = ({ item }) => {
return (
<Block>
<Text h4>{item.menu.fooditem.name}</Text>
<Text captionMedium style={{ marginTop: 5 }}>{item.menu.fooditem.description}</Text>
<Text navTitle>{item.menu.fooditem.price}</Text>
</Block>
)
}
render() {
return (
<Block style={styles.container}>
<Text h3>Some of our favorites!</Text>
<Block>
<FlatList
style={{ marginHorizontal: 10, marginTop: 20 }}
data={infoFile}
renderItem={this.renderRow}
keyExtractor={(item, index) => item.id}
/>
</Block>
</Block>
);
}
}
So for reference, what is being down is "Fresh Homemade Soup of the Moment" and "Houmous". I want to show all fooditems from the FIRST restaurant. I don't want to display any data from the second restaurant.
Any help would be greatly appreciated!