javascript - 在 React Native 中使用 map 访问嵌套的 json

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

我想使用 Array.map() 访问 payload.name, payload.brands.name(s), payloads.brands.subproducts.name(s)并在组件中呈现值。如何像使用 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);