CODEWITHSUNDEEP
react-native
Joppe Meijers
Joppe Meijers

Reputation: 299

loop nested object react native

I'm new to react native and want to loop trough a nested object. I created a file named 'spots.js' i looks like this:

export {spots};

var spots = [
  {
    name: 'Barberistas',
    location: 'Geleen',
    img_url: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    isFavourite: false,
    imagesReviews:{
      img1: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img2: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img3: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    }
  },
]

Now i'm trying to show the images from 'spots' of imagesReviews. I know how i loop trough a object but i'm stucked with this nested object. At the moment i have this:

<ScrollView horizontal={true}> 
  {
    spots.map((l) => {
      return <Image source={ l.imagesReviews }></Image>

    })
  } 
</ScrollView>

Screenshot of structure: enter image description here

Is there someone who can help me show those pictures in this scrollview? I imported everything the correct way, my only question is how can i loop trough that nested object and only show the imagesReviews?

Upvotes: 0

Views: 45

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

You can use Object.keys() to iterate over inner object.

You can do this,

{
  spots.map((l) => {
    //It might be possible that not every object in spots array has imagesReviews object. 
    //Just put a check that every node in spots array contains imagesReviews object and then only show Image

    if(l.imagesReviews){
       return Object.keys(l.imagesReviews).map(key => <Image source={ l.imagesReviews[key] }></Image>)
    }
  })
}

Upvotes: 1

Related Questions