Using map to access nested json in react native

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) with Array.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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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);

Method 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.

Method 3

You can also use forEach since you’ll have to nest map calls but you expect a flat array (?) in the end :

var 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
          }
        ]
      }]
    }
  ]
}

var result = [];

json.payload.forEach(product => {
  product.brands.forEach(brand => {
    brand.subProducts.forEach(subProduct => {
      result.push([product.name, brand.name, subProduct.name].join(', '));
    });
  });
});

console.log(result);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x