React Native - Map function inside of another map function?

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

Boky · Accepted Answer · 2017-06-12 11:27:34Z

2

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.

edited Jun 12, 2017 at 11:27

answered Jun 12, 2017 at 11:22

Boky

12.1k30 gold badges104 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Proz1g Over a year ago

Thank you so much!! I did this and it works, I suppose its everything correct or its not? xD Just another thing, don't I need a unic key to every element?

Boky Over a year ago

@Proz1g Yes. You can use something uniq from your data. For example monuments has an id. For poi you can use name. Or you can use map index. {api.map((i, index1) => i.monuments.map((j, index2) => j.pois.map((k, index) => k.name)))}. It's always better to use something uniq from the looped data but the index is also good.

Proz1g Over a year ago

Ok. Thank you, you save me day :) Best regards!

Collectives™ on Stack Overflow

React Native - Map function inside of another map function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related