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

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

• javascript
• json
• reactjs
• react-native
• ecmascript-6

• Could you provide a little bit code of your ponent (the render should be enough)? Do you save the json in your state? – Nocebo Commented Oct 2, 2017 at 7:14
• I'd remend you make an entire algorithm to build an array with all the data you're looking for. – Andrew Commented Oct 2, 2017 at 7:19

3 Answers 3

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

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 bine it with a table and columns, because it just renders the values now.

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