Using map to access nested json in react native
10,189
Solution 1
You need to nest Array.map()
var data = {
"payload": [
{
"id": 1,
"name": "Atta",
"brands": [
{
"id": 118,
"name": "Wheatola",
"subProducts": [
{
"id": 858,
"name": "Chakki Aata",
"minPrice": 52,
"maxPrice": 56
},
{
"id": 2,
"name": "Chakki Atta",
"minPrice": 222,
"maxPrice": 236
}
]
}
]
},
{
"id": 16,
"name": "Rice (Branded)",
"brands": [
{
"id": 25,
"name": "CookStar",
"subProducts": [
{
"id": 1163,
"name": "Best Basmati",
"creditDays": 0,
"minPrice": 5600,
"maxPrice": 5600
},
{
"id": 863,
"name": "Extra Long Grain Basmati",
"creditDays": 0,
"minPrice": 7800,
"maxPrice": 7800
}
]
}
]
}
]
}
const renderData = data.payload.map((payload) => {
return payload.brands.map(brand =>{
return brand.subProducts.map(subProduct => {
return `${payload.name}, ${brand.name}, ${subProduct.name}`
}).join("\n")
}).join("\n")
}).join("\n")
console.log(renderData);
Solution 2
Here might be a working example (without styling or anything):
render() {
return (
<div>
{
json.payload.map(j =>
<div>
{j.name}
{j.brands.map(b =>
<div>
{b.name}
{b.subProducts.map(s =>
<div>
{s.name}
</div>)
}
</div>
)}
</div>
)
}
</div>
);
}
You probably need to style it, or combine it with a table
and columns
, because it just renders the values
now.
Author by
Mayur Bhangale
Updated on July 14, 2022Comments
-
Mayur Bhangale almost 2 years
I am trying to access keys and arrays in my json structure with
Array.map()
but I'm missing something. Here's my JSON:{ "payload": [ { "id": 1, "name": "Atta", "brands": [ { "id": 118, "name": "Wheatola", "subProducts": [ { "id": 858, "name": "Chakki Aata", "minPrice": 52, "maxPrice": 56 }, { "id": 2, "name": "Chakki Atta", "minPrice": 222, "maxPrice": 236 } ] } ] }, { "id": 16, "name": "Rice (Branded)", "brands": [ { "id": 25, "name": "CookStar", "subProducts": [ { "id": 1163, "name": "Best Basmati", "creditDays": 0, "minPrice": 5600, "maxPrice": 5600 }, { "id": 863, "name": "Extra Long Grain Basmati", "creditDays": 0, "minPrice": 7800, "maxPrice": 7800 } ] } ] } ] }
I want to access
payload.name, payload.brands.name(s), payloads.brands.subproducts.name(s)
withArray.map()
and render the values in components. How do I access nested json like using map()? Expected output is:Atta, Wheatola, Chakki Aata Atta, Wheatola, Chakki Aata Rice (Branded), Cookstar, Best Basmati Rice (Branded), Cookstar, Extra Long Grain Basmati
-
Nocebo over 6 yearsCould you provide a little bit code of your component (the
render
should be enough)? Do you save thejson
in yourstate
? -
Andrew over 6 yearsI'd recommend you make an entire algorithm to build an array with all the data you're looking for.
-