Reputation: 15
Here is the Json data and i have nested map functions and i want to grab phone case and icon. but JSX doesnt return anything. but when i console log it returns icon and phone case
"variations": [
{
"id": "236",
"variation": [
{
"Phone Case": "iphone 8",
"icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
}
],
"quantity": "1",
"price": "130.00",
},
{
"id": "237",
"variation": [
{
"Phone Case": "iphone X",
"icon": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/app/icons/K2hOUtPdHMiiqyYoYv0LrvBQsrAPzcl1c5mHQkiV.png"
}
],
"quantity": "1",
"price": "150.00",
}
],
Looping through using nested map function. to excess phone case and icon
_getVariations = () => {
const { variations } = this.state;
if(variations.length > 0){
variations.map((vari) => {
vari.variation.map((ivari) => {
return Object.keys(ivari).map((key) => (
<View style={styles.variationRow}>
<View>
<Text>{ivari[key]}</Text>
</View>
<View>
<Image
style={{ width: 25, height: 25 }}
source={{ uri: ivari[key] }}/>
</View>
</View>
));
});
});
}
}
Upvotes: 0
Views: 68
Reputation: 1912
You also need a return on the outer map:
variations.map((vari) => {
return (
vari.variation.map((ivari) => {
return (
Object.keys(ivari).map((key) => {
return (
<View style={styles.variationRow}>
<View>
<Text>{ivari[key]}</Text>
</View>
<View>
<Image
style={{ width: 25, height: 25 }}
source={{ uri: ivari[key] }}
/>
</View>
</View>
);
});
);
});
);
});
Upvotes: 1