Question

我正在尝试使用Array.map()访问json结构中的键和数组，但我错过了一些东西。这是我的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
          }
        ]
      }
    ]
  }
]
  }

我想使用payload.name, payload.brands.name(s), payloads.brands.subproducts.name(s)访问Array.map()并在组件中呈现值。如何使用map（）访问嵌套的json？预期产出是：

Atta, Wheatola, Chakki Aata
Atta, Wheatola, Chakki Aata
Rice (Branded), Cookstar, Best Basmati
Rice (Branded), Cookstar, Extra Long Grain Basmati

Answer 1

您需要嵌套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);

Answer 2

这可能是一个有效的例子（没有样式或任何东西）：

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

您可能需要对其进行样式设置，或将其与table和columns结合使用，因为它现在只呈现values。

Answer 3

您也可以使用forEach，因为您必须嵌套map来电，但您最终会想到一个扁平数组（？）：

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

使用map来访问本机中的嵌套json

3 个答案: