2017-10-21 9 views
1

オブジェクトの1つに基づいてバリエーションのあるアイテムのリストを表示しようとしています。いくつかの洞察力のために以下のコードを参照してください:上記の例でネストされたオブジェクトの配列をネイティブでマッピングする

data: [{ 
 
    "transportation": [ 
 
    {"id": "1", "name": "bus", "type": "large"}, 
 
    {"id": "2", "name": "bicycle", "type": "small"}], 
 
    
 
    "animal": [ 
 
    {"id": "3", "name": "elephant", "type": "large"}, 
 
    {"id": "4", "name": "mouse", "type": "small"}] 
 
}]

を、私が表示したいタイプが「大」と「小であれば「大」のテキストのような単純な何かを言うことができます最初に外側の地図を使わずに内側の地図をテストすることから始めましたが、最初に内側の地図をテストすることから始まり、以下に示すように:

data.animal.map((info) => { 
 
    switch (info.type){ 
 
    case "large": 
 
     return(
 
     <View> 
 
     <Text>Large</Text> 
 
     </View>); 
 

 
    case "small": 
 
     return(
 
     <View> 
 
     <Text>Small</Text> 
 
     </View>); 
 
      
 
    default: 
 
     return(
 
     <View> 
 
     <Text>Whatever</Text> 
 
     </View>); 
 
    } 
 
})

は私が

TypeError: Cannot read property 'map' of undefined

この問題が発生しない理由の任意のアイデアを得ましたか?

EDIT:

答えを待っている間に、私は、ネストされたループを行うにしようとしました。以下は私のコードスニペットです:

data.map((category, key) => { 
 
    return(
 
    Object.keys(category).map((info) => { 
 
    switch (info.type){ 
 
    case "large": 
 
    return(
 
    <View> 
 
    <Text>Large</Text> 
 
    </View>); 
 
    
 
    case "small": 
 
    return(
 
    <View> 
 
    <Text>Small</Text> 
 
    </View>); 
 
    
 
    default: 
 
    return(
 
    <View> 
 
    <Text>Whatever</Text> 
 
    </View>); 
 
} 
 
    }) 
 
) 
 
})

それはエラーなしで実行されますが、それは私に期待される結果を与えるものではありません。すべての出力がデフォルトの「何でも」に切り替わります。

答えて

1

データ配列の最初のオブジェクトにアクセスしています。だからあなたのコードがあるべき

data[0].animal.map((info) => { 
.... 
0

data = [{ 
 
    "transportation": [ 
 
    {"id": "1", "name": "bus", "type": "large"}, 
 
    {"id": "2", "name": "bicycle", "type": "small"}], 
 
    
 
    "animal": [ 
 
    {"id": "3", "name": "elephant", "type": "large"}, 
 
    {"id": "4", "name": "mouse", "type": "small"}] 
 
}] 
 

 

 
data[0].animal.map((info) => { 
 
    return console.log(info) 
 
    } 
 
)

関連する問題