如何将 JSON 字段连接到另一个对象答案

【问题标题】：How to concat JSON field into another object如何将 JSON 字段连接到另一个对象
【发布时间】：2022-01-06 06:10:27
【问题描述】：

这是有问题的数据：

[
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
]

我想将 numOf 连接到 hist parent ingredient 以便我的表正确呈现现在给定 2 种成分，我的表有 4 行

编辑

想要的结果应该是这样的：

[
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                    "numOf": 4,
                }
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                    "numOf": 3,
                }
            }
        ],
        "total_number": 0
    }
]

您看到的 JSON 文件是我在查询用户冰箱时的服务器响应。然后我想在一张桌子上显示他所有的成分。以下是我在 VueJS 中声明数组的方式：

import axios from 'axios'
export default {
    name: 'Fridge',
    data() {
        return {
            username: '',
            fridge: {},
            ingredients: []
        }
    },
}

这是循环响应数据并添加ingredients 对象并将其存储在名为ingredients 的数组中的代码。我试过声明是一个对象，但没有成功。

for (let i = 0; i < res.data["ingredients"].length; i++) {
 var obj = this.fridge.ingredients[i]
 for (var key in obj) {
  var value = obj[key]
  this.ingredients.push(value)
 }
}

【问题讨论】：

您能告诉我们想要的结果吗？描述本身还不够清楚。到目前为止，您自己尝试过什么？

标签： javascript arrays json for-loop html-table

【解决方案1】：

您可以循环遍历数据数组中每个项目的成分key 中的每个项目，并为每个项目在ingredient 对象中添加numOf 键并删除父项目上的numOf .

let data = [
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
];

data[0].ingredients.map((item, index) => {
  item["ingredient"]["numOf"] = item["numOf"];
  delete item["numOf"];
});

console.log(data);

如果你想更有活力，而不是像之前的代码那样具体

你可以这样处理

data.forEach(dataItem => {
  dataItem.ingredients.map((item, index) => {
    item["ingredient"]["numOf"] = item["numOf"];
    delete item["numOf"];
  });
});

【讨论】：

为什么你使用地图并在地图没有分配给任何东西时返回地图内部？在这里使用 forEach 会更好。
当然不需要，我只是将Array.prototype.reduce 转换为Array.prototype.map 并没有去掉返回键
您的最后一个示例也使用了forEach 和map。 map 用于从函数返回数据，但如果您不需要返回任何内容，forEach 会更好。
谢谢！这就是我需要的

【解决方案2】：

您可以使用 2 个循环来迭代数据，将 numOf 添加到成分中，然后将其删除。

第一个循环将遍历 data 中的所有项目，第二个循环将遍历该对象中的所有 ingredients。

const data = [
    {
        "id": 3,
        "owner": "http://localhost:8000/api/v1/users/3/",
        "ingredients": [
            {
                "ingredient": {
                    "id": 1,
                    "category": "Fruit",
                    "name": "Apple",
                    "calories": 100.0,
                },
                "numOf": 4
            },
            {
                "ingredient": {
                    "id": 2,
                    "category": "Vegetable",
                    "name": "Potato",
                    "calories": 10.0,
                },
                "numOf": 3
            }
        ],
        "total_number": 0
    }
]

data.forEach((d) => {
  d.ingredients.forEach((i) => {
    i.ingredient.numOf = i.numOf
    delete i.numOf
  })
})

console.log(data)

【讨论】：