如何将“键”：“值”对添加到嵌套对象数组中，其中“值”迭代不同的数组？答案

【问题标题】：How to add a 'key': 'value' pair to a nested array of objects where the 'value' iterates over a different array?如何将“键”：“值”对添加到嵌套对象数组中，其中“值”迭代不同的数组？
【发布时间】：2021-09-29 21:47:35
【问题描述】：

我有一个这样的对象数组，其中可以有更多或更少的项目：

arrOfItems = [
    {
        "type": "apple",
        "earth: "blue"
    }
    {
        "type": "orange",
        "attrs": {
            "id": 21,
            "data": "RET",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
    {
        "type": "apple",
        "earth: "green"
    },
    {
        "type": "apple",
        "earth: "yellow"
    },
    {
        "type": "orange",
        "attrs": {
            "id": 28,
            "data": "EMC",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
]

数组中的每一项都有一个结构。所以如果“type”=“apple”那么另一个键将被添加“earth”。如果 "type" = "orange"，则会添加另一个键 "attrs"，其结构如下：

"attrs": {
    "id":,
    "data": "",
    "data2": null,
    "order": null,
    "order2": null,
    "type": "",
    "char": ""
}

对于类型为“橙色”的每个项目，如何将键“类”添加到 attrs 对象，其中该键分配给以下数组中的项目：

arrOfProps = ["prop_1", "prop_2", "prop_3", "prop_4" "prop_5", "prop_6"]

例如，基于上面的 arrOfItems，我如何得到以下内容：

arrOfItems = [
    {
        "type": "apple",
        "earth: "blue"
    }
    {
        "type": "orange",
        "attrs": {
            "class": "prop_1",
            "id": 21,
            "data": "RET",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
    {
        "type": "apple",
        "earth: "green"
    },
    {
        "type": "apple",
        "earth: "yellow"
    },
    {
        "type": "orange",
        "attrs": {
            "class": "prop_2",
            "id": 28,
            "data": "EMC",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
    ......... For the next item with "type": "orange", we have "class": "prop_3", etc.
]

到目前为止，我有：

arrOfItems.forEach( element =>
    if(element.type === "orange") {
        obj.attrs["class"] = arrOfProps[??];
    }
)

但是我不确定如何走得更远。有人知道吗？

【问题讨论】：

标签： javascript arrays json vue.js foreach

【解决方案1】：

您可以在跟踪分配的道具的同时简单地对其进行迭代：

const arrOfItems = [
    { type: 'apple', earth: 'blue' },
    {
        "type": "orange",
        "attrs": {
            "id": 21,
            "data": "RET",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
    { type: 'apple', earth: 'green' },
    { type: 'apple', earth: 'yellow' },
    {
        "type": "orange",
        "attrs": {
            "id": 28,
            "data": "EMC",
            "data2": null,
            "order": null,
            "order2": null,
            "type": "property",
            "char": "@"
        }
    },
]

const arrOfProps = ["prop_1", "prop_2", "prop_3", "prop_4", "prop_5", "prop_6"];

let nextProp = 0;
for (const element of arrOfItems) {
    if (element.type !== 'orange') continue;
    element.attrs.class = arrOfProps[nextProp++];
}

console.log(arrOfItems);

当然，如果你的橙子比arrOfProps 中的元素多，那么class 将被分配给undefined。

【讨论】：