accessing multidimensional array with nested object in react native

Question

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

Binit Ghetiya · Accepted Answer · 2018-01-12 10:42:53Z

2

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.

edited Jan 12, 2018 at 10:42

answered Jan 12, 2018 at 10:15

Binit Ghetiya

1,9792 gold badges22 silver badges33 bronze badges

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

10 Comments

kiranb ghrix Over a year ago

I have tried this & its returning error. undefined is not a function (evaluating 't.selectoptions.map(function(e,t) {return i.defult.createElement(I.View,{key:t},i.default.createElement(I.Text,null,e.OptionName))})')

Binit Ghetiya Over a year ago

Try dataImage.selectoptions.map instead of dataImage['selectoptions'].map

Binit Ghetiya Over a year ago

Please make sure Key names in return json and your defined keys are same. here i dont think there is any bug. seems ok to me.

kiranb ghrix Over a year ago

this is my array [{"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"}]}]}] and its working properly for productid , productname

Binit Ghetiya Over a year ago

seems like dataImage['selectoptions'] returning undefined please check that try console.log(dataImage['selectoptions']) check i have added in answer

|

Collectives™ on Stack Overflow

accessing multidimensional array with nested object in react native

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related