如何使用对象中的对象数组的值创建一个新数组？

Question

（这与上一个问题类似但更复杂）

我有一个数组 originalArrayData 像这样：

originalArrayData = [{
    "16": {
        "id": 22,
        "grid_row_id": 5,
        "grid_col_id": 16,
        "data": "10",
        "created_at": "rertte",
        "error_mgs": null
    },
    "header": "BUTTERFLY HEADER",
    "id": 5
},
{
    "17": {
        "id": 31,
        "grid_row_id": 9,
        "grid_col_id": 16,
        "data": "14",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "BUTTERFLY HEADER",
    "id": 6
},
{
    "18": {
        "id": 35,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "55",
        "created_at": "thrtuhrs",
        "error_mgs": null
    },
    "header": "PARROT HEADER",
    "id": 6
},
{
    "19": {
        "id": 36,
        "grid_row_id": 9,
        "grid_col_id": 12,
        "data": "31",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "PARROT HEADER",
    "id": 7
},
{
    "20": {
        "id": 36,
        "grid_row_id": 9,
        "grid_col_id": 14,
        "data": "31",
        "created_at": "rtyhtyjtdyj",
        "error_mgs": null
    },
    "header": "OTHER HEADER",
    "id": 7
}...........

假设我有一个 id 数组（这些数字可能是随机的，并不总是 2。可能有 1、3 等数组项）

arrayOfIds: [16 , 12]

如果 grid_col_id 的值存在于 arrayOfIds 中的任何位置，那么对于具有相同 grid_col_id 的每个对象，我如何创建一个新数组，其中包含使用“标题”值创建的新键，并且这些键的值是总和具有相同 grid_col_id 的所有项目的“数据”值。

目标/预期输出：

[{ "butterflyheader": 24, "parrotheader": 86, "category": "None"}]

解释：如果您查看 originalArrayData 中的每个项目（对于此示例，有 4 个，但可能有很多），前 2 个项目具有相同的 grid_col_id 和相同的标题。 对于这两个，“数据”=“10”和“14”，当添加时会产生 24。因此，你有“butterflyheader”：24。

相同的逻辑可以应用于 parrotheader。 所有新键都是每个对象的原始“标题”的小写且无空格版本。

不包含标题为“OTHER HEADER”的项目，因为它的 grid_col_id 在 arrayOfIds 中不存在。 "category": "None" 始终存在并且可以“硬编码”到新数组中。

为了解决这个问题，我有以下代码：

        // creates an array of all of the innermost objects in the original array
        let tableDataFiltered = originalArrayData.map(item => 
            Object.values(item).filter(item => typeof item === "object")
        ).flat()

        // Retrieve all items with the relevant grid_col_id
        tableDataFiltered.filter(item => arrayOfIds.includes(item.grid_col_id))

        // Headers to use as keys
        let headersAsKeys = tableDataFiltered.forEach(item => {
            item.header.toLowerCase().split(' ').join(''))
        })

        Object.values(tableDataFiltered.reduce((acc, curr) => {
            acc[curr.category] = 'None';
            headersAsKeys.forEach(key => {
                acc[curr.category][key] += curr[key];
            })
            return acc;
        }, {}));

但是，它导致 headersAsKeys.forEach 不是一个函数。

如何实现目标数组？ =>

[{ "butterflyheader": 24, "parrotheader": 86, "category": "None"}]

Answer 1

您可以将Array#reduce与对象一起使用来存储每个标题的数据。

 const arr=[{"16":{id:22,grid_row_id:5,grid_col_id:16,data:"10",created_at:"rertte",error_mgs:null},header:"BUTTERFLY HEADER",id:5},{"17":{id:31,grid_row_id:9,grid_col_id:16,data:"14",created_at:"rtyhtyjtdyj",error_mgs:null},header:"BUTTERFLY HEADER",id:6},{"18":{id:35,grid_row_id:9,grid_col_id:12,data:"55",created_at:"thrtuhrs",error_mgs:null},header:"PARROT HEADER",id:6},{"19":{id:36,grid_row_id:9,grid_col_id:12,data:"31",created_at:"rtyhtyjtdyj",error_mgs:null},header:"PARROT HEADER",id:7},{"20":{id:36,grid_row_id:9,grid_col_id:14,data:"31",created_at:"rtyhtyjtdyj",error_mgs:null},header:"OTHER HEADER",id:7}]; const ids = [16 , 12]; let res = [arr.reduce((acc, {header,id,...rest})=>{ let [{grid_col_id, data}] = Object.values(rest); header = header.toLowerCase().replaceAll(' ', ''); if(ids.includes(grid_col_id)) acc[header] = (acc[header] || 0) + +data; return acc; }, {category: "None"})]; console.log(res);

Answer 2

您只需要一个循环即可。 查看您正在迭代的对象时，请检查grid_col_id是否是您要查找的对象。 如果是，则将数据值添加到输出对象（以{ category: 'none' }开头，如果有则与前一个值相加。最后，将结果对象包围在一个数组中。

 const originalArrayData=[{16:{id:22,grid_row_id:5,grid_col_id:16,data:"10",created_at:"rertte",error_mgs:null},header:"BUTTERFLY HEADER",id:5},{17:{id:31,grid_row_id:9,grid_col_id:16,data:"14",created_at:"rtyhtyjtdyj",error_mgs:null},header:"BUTTERFLY HEADER",id:6},{18:{id:35,grid_row_id:9,grid_col_id:12,data:"55",created_at:"thrtuhrs",error_mgs:null},header:"PARROT HEADER",id:6},{19:{id:36,grid_row_id:9,grid_col_id:12,data:"31",created_at:"rtyhtyjtdyj",error_mgs:null},header:"PARROT HEADER",id:7},{20:{id:36,grid_row_id:9,grid_col_id:14,data:"31",created_at:"rtyhtyjtdyj",error_mgs:null},header:"OTHER HEADER",id:7}]; const arrayOfIds = [16, 12]; const outputObj = { category: 'none' }; for (const { header, id, ...rest } of originalArrayData) { const { grid_col_id, data } = Object.values(rest)[0]; if (arrayOfIds.includes(Number(grid_col_id))) { outputObj[header] = (outputObj[header] || 0) + Number(data); } } console.log([outputObj]);