React Native - Map function inside of another map function? - react-native

Question

I have this array of data that have 4 objects, and after selecting manually one of this, I don't know how to get all the information inside. For example I want all the data that is inside 'pois' (another array)...I was thinking that should be something like this:
{api.monuments.map((monumento, index) => (
{monumento.pois.map((poi, index2) => (
<TouchableHighlight
onPress={() => this.onClick(convento)}
style={styles.monumentoContainer}
key={index2}
>
<Image style={styles.monumentoPic} source={{uri:'http://192.168.56.1:3000/'+poi.image}}>
<View style={styles.monumentoTitleContainer}>
<Text style={styles.monumentoTitle}>{poi.name}</Text>
</View>
</Image>
</TouchableHighlight>
))}
))}
But it's not - image of the error, so how can I do it?
Another question is: since I have an array with 4 objects, and each one have a specific category, how can I select only the object that have the 'category' == 'xxxxx'?
Hope you can help me! Thank you

Answer 1

You can do it as follows:
var api = [
{
category: "Cat_name",
monuments: [
{
item: 'item1',
pois: [
{name: 'poi1'},
{name: 'poi2'},
{name: 'poi3'},
{name: 'poi4'}
]
}
]
},
{
category: "Cat_name1",
monuments: [
{
item: 'item2',
pois: [
{name: 'poi5'},
{name: 'poi6'},
{name: 'poi7'},
{name: 'poi8'}
]
}
]
}
]
To get all pois you can do something as follows:
{api.map(i => i.monuments.map(j => j.pois.map(k => k.name)))}
And if you want to check for category name you can do something like:
{data.map(i => {
if (i.category === "Cat_name1"){
return i.monuments.map(j => j.pois.map(k => k.name))
}
})}
Here is fiddle.