如何将子数组与json对象分开答案

【问题标题】：How to separate child array from json object如何将子数组与json对象分开
【发布时间】：2021-11-11 13:42:52
【问题描述】：

"data": {
    "master": {
        "chicken": [
            {
                "productId": 6,
                "productName": "Test prod",
                "productIsSpecial": 1,
                "restaurantId": 1,
                "categoryId": 3,
                "categoryName": "chicken",
                "productImage": "2021-08-18T21:16:11.197586800_category.jpg",
                "productRating": 5.0,
                "productPrice": 10.0,
                "productEnabled": 1
            },
          
        ],
        "wheat beer": [
            {
                "productId": 1,
                "productName": "Non-Veg pizza",
                "productIsSpecial": 1,
                "restaurantId": 1,
                "categoryId": 1,
                "categoryName": "wheat beer",
                "productImage": "2021-08-22T17:24:02.969600500_category.jpg",
                "productRating": 5.0,
                "productPrice": 200.0,
                "productEnabled": 1
            },
         
        ]
    },

我有这个 JSON 响应，我想做的是在其类别数组下方显示所有产品我使用 vue3 作为我尝试使用 result.data.data.master 的前端 js 框架，但它只给我类别内的数据数组而不显示实际的数组名称。

我也想显示类别名称。那么，如何在产品列表上方显示鸡作为猫名？

编辑：我想显示类别明智的产品列表，这里我的类别是chicken[]，我正在获取该类别的产品列表：

"chicken": [
  {
    "productId": 6,
    "productName": "Test prod",
    "productIsSpecial": 1,
    "restaurantId": 1,
    "categoryId": 3,
    "categoryName": "chicken",
  },
],

这样，我如何在产品列表上方显示chicken 作为猫名？

【问题讨论】：

标签： javascript json vue.js

【解决方案1】：

我认为最好的方法是以这种方式转换对象。假设您有一个方法 loadData 并且您想将获取的数据保存在 results 中，您可以这样做。

loadData() {
    axios.get("yourendpoint.com").then((data) => {
      this.results = Object.entries(data.data.master).map(([name, value]) => ({
        name,
        value,
      }));
    });
  },

【讨论】：