javascript 如何通过按特定的属性名称对数据进行分组和合并来创建新的数组项？

dxxyhpgq 于 2022-12-21 发布在 Java

关注(0)|答案(2)|浏览(325)

我有一个对象数组

rows = [
    {
      id_temp: 1,
      description: 'template 1',
      color_id: 1,
      code: '#000000'

   },
    {
      id_temp: 1,
      description: 'template 1',
      color_id: 2,
      code: '#ffffff'

    },
   {
      id_temp: 2,
      description: 'template 2',
      color_id: 1,
      code: '#000000'

    },
   {
      id_temp: 2,
      description: 'template 2',
      color_id: 2,
      code: '#ffffff'

    },
]

我需要将其转换为该形状，添加颜色属性作为对象数组，该对象数组由基于重复id_temp的每次迭代的代码和id组成

[{
    "id_temp": 1,
    "description": "template 1",
    "color": [{
        "id": 1
        "code": "#000000"
         },
        {
        "id": 2
        "code": "#ffffff"
        }]
},
{
    "id_temp": 2,
    "description": "template 2",
    "color": [{
        "id": 1
        "code": "#000000"
    },
    {
      "id": 2
      "code": "#ffffff"
    }]
}]

我尝试在foreach中循环它，但这会导致覆盖新数组中的值

let resultTemplates = [];
rows.forEach((row) => {
        if (resultTemplates[row.id_temp]) {
          resultTemplates['color'] = row.color_id;
          resultTemplates['color'] = row.code;
        } else {
          resultTemplates.id_temp = row.id_temp;
          resultTemplates.description = row.description;
          resultTemplates['color'].id = row.color_id;
          resultTemplates['color'].code = row.code;
        }
        });

JavaScript

来源：https://stackoverflow.com/questions/74770999/how-to-create-new-array-items-by-grouping-and-merging-the-data-each-by-certain-p

2条答案

按热度按时间

pgvzfuti1#

使用Reduce方法

const rows = [
    {
        id_temp: 1,
        description: "template 1",
        color_id: 1,
        code: "#000000",
    },
    {
        id_temp: 1,
        description: "template 1",
        color_id: 2,
        code: "#ffffff",
    },
    {
        id_temp: 2,
        description: "template 2",
        color_id: 1,
        code: "#000000",
    },
    {
        id_temp: 2,
        description: "template 2",
        color_id: 2,
        code: "#ffffff",
    },
];

const outArr = rows.reduce((acc, crt) => {
    if (!acc[crt.id_temp]) {
        crt["color"] = [
            {
                id: 1,
                code: crt.code,
            },
        ];
        acc[crt.id_temp] = crt;
    } else {
        acc[crt.id_temp].color.push({ id: acc[crt.id_temp].color.length +1, code: crt.code });
    }

    return acc;
}, {});

console.log(Object.values(outArr));

赞(0）回复(0）举报 2022-12-21

piah890a2#

一个基于reduce的精益（在代码和抽象方面）实现在函数体中使用destructuring assignments作为函数参数和变量赋值，它也利用了rest属性。

function groupCreateAndCollectNewItemsByTemplateId(
  index, { color_id, code, ...itemRest }
) {
  const { id_temp: groupKey } = itemRest;

  // ... more code ...
}

并且为了表达分组项目的创建和/或访问以及已经创建/分组的项目的聚集，可以选择Nullish Coalescing Assignment Operator/??=。

(index[groupKey] ??= { ...itemRest, color: [] })

index是一个通过减少OP的rows数组以编程方式聚合的对象。它是新创建的分组项的根对象，其中rows项的id_temp值用作分组键。
在最后一步中，需要将简化的中间分组对象传递到Object.values，以便获得分组对象的值的数组，这些值是新创建的模板项。
一个二个一个一个

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 如何通过按特定的属性名称对数据进行分组和合并来创建新的数组项？

2条答案

相关问题

热门标签

最新问答