CODEWITHSUNDEEP
react-native
kiranb ghrix
kiranb ghrix

Reputation: 190

accessing multidimensional array with nested object in react native

I want accessing multidimensional array in my app. my array is like :-

[{"productid":"31369","productname":"Abilene Swivelling ","productcode":"MTN-CLR.OW","selectoptions":[{"OptionName":"Bracket Option","OptionValue":[{"id":"1668","text":"Without Sound Bar Bracket"},{"id":"1669","text":"With Sound Bar Bracket"}]}]}]

I want to access selectoptions . I have fetched productid but not able to fetch selectoptions. I have tried this:-

{this.props.data.map((dataImage,Index)=>
                <TouchableOpacity>
                        <View key={dataImage['productid']} style={productStyle.homeimg1}>                           
                            <Text style={productStyle.title}> {dataImage['productname']}</Text>
                            <Text style={productStyle.pricesecleft}>RRP {dataImage['productrrp']}</Text>
</View>
{dataImage['selectoptions'].map((selecval) =>
<View>
                            <Text>{selecval['OptionName']}</Text></View>

                            )}
  </View>
                </TouchableOpacity>
                )}

its not working . return error

Upvotes: 1

Views: 754

Answers (1)

Binit Ghetiya
Binit Ghetiya

Reputation: 1979

You must use return statement to return data in map function

   {this.props.data.map((dataImage,Index)=>
        return (
          <TouchableOpacity key={Index}>
                <View key={dataImage['productid']} style={productStyle.homeimg1}>                           
                    <Text style={productStyle.title}> {dataImage['productname']}</Text>
                    <Text style={productStyle.pricesecleft}>RRP {dataImage['productrrp']}</Text>
                </View>
                {
                   console.log(dataImage['selectoptions'])
                   dataImage['selectoptions'].map((selecval, Index2) =>
                    return (
                      <View key={Index2}>
                        <Text>{selecval['OptionName']}</Text>
                        {selecval['OptionValue'].map((optionval, Index3) =>
                          return (
                              <View key={Index3}>
                                <Text>{optionval['text']}</Text>
                              </View>
                          )
                        }
                      </View>
                    )
                )}
      </View>
      </TouchableOpacity>
        )                    
     )}

Hope this will help.

Upvotes: 2

Related Questions