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

Question

这里是有问题的数据：

[
    {
        "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 中，以便我的 table 正确呈现现在给定 2 种成分，我的 table 有 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 文件是我的服务器在查询用户冰箱时的响应。然后我想在 table 中显示他所有的成分。这是我在 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)
 }
}

Answer 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"];
  });
});

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

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

How to concat JSON field into another object

javascript

arrays

json

for-loop

html-table