CODEWITHSUNDEEP
jsonreact-native
pratteek shaurya
pratteek shaurya

Reputation: 960

Getting nested path from json file in react native

I made a json file

data.js

export const PRODUCT_DATA = [
{
    name: 'abc',
    price: 90,
    weight: '1 kg',
    currency: 'INR',
    liked: true,
    image: require('../assets/images/carrots/Rectangle238.png')
},
{
    name: 'bce',
    price: 10,
    weight: '1 kg',
    currency: 'USD',
    liked: false,
    image: require('../assets/images/mango/Rectangle234.png')
},
{
    bringOutSpecialDealsComponent: [
        {
            name: 'def',
            price: 120,
            weight: '1 kg',
            currency: 'INR',
            liked: true,
            image: require('../assets/images/grapes/Rectangle235.png'),
        },
        {
            name: 'feg',
            price: 21,
            weight: '1 kg',
            currency: 'USD',
            liked: false,
            image: require('../assets/images/mango/Rectangle234.png')
        },
    ]
},

];

I have imported this file in another component file and trying to use it.

Store.js

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
    {PRODUCT_DATA.map((item, index) => {
        return (<View style={styles.card}>
            <BringOutSpecialDeal
                imgSrc={item.bringOutSpecialDealsComponent.image}
                name={item.bringOutSpecialDealsComponent.name}
                price={"Rs. " + item.bringOutSpecialDealsComponent.price}
                weight={item.bringOutSpecialDealsComponent.weight}
                like={item.bringOutSpecialDealsComponent.weight}
            />
        </View>);
    })}
</ScrollView>

But I am getting error which says Cannot read property 'image' of undefined. I am not able to figure how to get nested path of json file.

Upvotes: 0

Views: 86

Answers (2)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

You are accessing bringOutSpecialDealsComponent array key while it doesn't exist in your first two items in the array object. What you can do like

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  {PRODUCT_DATA.map((item, index) => {
    return (
      <View style={styles.card}>
        {item.bringOutSpecialDealsComponent
          ? item.bringOutSpecialDealsComponent.map((innerItem, i) => {
              return (
                <BringOutSpecialDeal
                  imgSrc={innerItem.image}
                  name={innerItem.name}
                  price={"Rs. " + innerItem.price}
                  weight={innerItem.weight}
                  like={innerItem.weight}
                />
              );
            })
          : null}
      </View>
    );
  })}
</ScrollView>

Upvotes: 0

Nishant
Nishant

Reputation: 55866

{PRODUCT_DATA[2].bringOutSpecialDealsComponent.map((item, index) => {
        return (<View style={styles.card}>
            <BringOutSpecialDeal
                imgSrc={item.image}
                name={item.name}
                price={"Rs. " + item.price}
                weight={item.weight}
                like={item.weight}
            />
        </View>);

Upvotes: 1

Related Questions