loop nested object react native

Question

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?

ravibagul91 · Accepted Answer · 2019-09-23 15:20:51Z

1

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>)
    }
  })
}

edited Sep 23, 2019 at 15:20

answered Sep 23, 2019 at 14:21

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

17 Comments

Joppe Meijers Over a year ago

Thanks for your help! When i do this i get ' TypeError: undefined is not an object (evaluating 'Object.keys(l.imagesReviews)')

ravibagul91 Over a year ago

How you are importing spots?

Joppe Meijers Over a year ago

import {spots} from '../spots/spots';

ravibagul91 Over a year ago

Try console.log(l.imagesReviews) and check you are getting object.

Joppe Meijers Over a year ago

Yes this is the solution! Thanks for your help!

|

Collectives™ on Stack Overflow

loop nested object react native

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related