javascript - Using map to access nested json in react native - Stack Overflow

admin管理员组

文章数量:1302274

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

Share Improve this question Follow edited Oct 2, 2017 at 7:07 Shubham Khatri 282k5858 gold badges431431 silver badges411411 bronze badges asked Oct 2, 2017 at 7:06 Mayur BhangaleMayur Bhangale 39611 gold badge55 silver badges1919 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptUsing map to access nested json in react nativeStack Overflow