使用 Javascript 将包含数组和对象混合的嵌套对象转换为不同的结构

Question

我有一个看起来像这样的嵌套对象。这包含嵌套数组和其中的对象。看起来像这样，

const input = {
  result: {
    data: {
      groupMapper: [
        {
          id: "id123",
          groupName: "Group 1",
          subGroups: []
        },
        {
          id: "id456",
          groupName: "Group 2",
          subGroups: []
        }
      ],
      items: [
        {
          id: "abc",
          itemName: "Item1",
          groupId: "id123",
          isDefault: true,
          value: 1,
          config: {
            saved: true
          }
        },
        {
          id: "def",
          itemName: "Item2",
          groupId: "id456",
          value: 2,
          isDefault: false,
          config: null
        },
        {
          id: "hgi",
          itemName: "Item3",
          groupId: "id123",
          isDefault: true,
          value: 3,
          config: {
            saved: true
          }
        }
      ]
    }
  }
};

我希望根据

groupMapper

和

items

中的 id 进行分组。所以基本上

items

数组中的条目应该根据 ``groupMapper

groupId

items

and should be part of new object in the output result. Also if an entry inside

saved

has

used: true

flag true should be put as

false` 的

after grouping in the final object, If its null, then add it as

进行分组。在输出结果中应将属性重命名为以下方式。

https://codesandbox.io/s/heuristic-nova-8flr9o?file=/src/index.js:1542-1759

const output = {
  id123: {
    categoryId: "id123",
    categoryName: "Group 1",
    tiles: [
      {
        tileId: "abc",
        tileName: "Item1",
        groupId: "id123",
        isDefault: true,
        value: 1,
        used: true
      },
      {
        tileId: "hgi",
        tileName: "Item3",
        groupId: "id123",
        isDefault: true,
        value: 3,
        used: true
      }
    ]
  },
  id456: {
    categoryId: "id456",
    categoryName: "Group 2",
    tiles: [
      {
        tileId: "def",
        tileName: "Item2",
        groupId: "id456",
        isDefault: false,
        value: 2,
        used: false
      }
    ]
  }
};

这里有两个条目有 groupId

id123

，一个有

id456

。因此，图块将在第一组中有两个条目，而第二组中只有一个条目。

used

标志也被设为真，因为

config.saved

是真的，而在另一种情况下，它的 null 因此 false 被放置为

used

我试过的代码

const { result } = input;
const res = Object.fromEntries(
  Object.entries(result).map(([key, value], index) => {
    return [key, { ...value, tiles: value.items, used: value.items.config }];
  })
);
console.log(res);

Answer 1

您可以首先根据

tiles

数据创建具有空

groupMapper

数组的输出结构。

然后迭代输入项并填充关联的

tiles

数组：

const input = {result: {data: {groupMapper: [{id: "id123",groupName: "Group 1",subGroups: []},{id: "id456",groupName: "Group 2",subGroups: []}],items: [{id: "abc",itemName: "Item1",groupId: "id123",isDefault: true,value: 1,config: {saved: true}},{id: "def",itemName: "Item2",groupId: "id456",value: 2,isDefault: false,config: null},{id: "hgi",itemName: "Item3",groupId: "id123",isDefault: true,value: 3,config: {saved: true}}]}}};

const {groupMapper, items} = input.result.data;
const output = Object.fromEntries(groupMapper.map(grp => [grp.id, {
    categoryId: grp.id,
    categoryName: grp.groupName,
    subGroups: grp.subGroups,
    tiles: []
}]));

for (const item of items) {
    output[item.groupId].tiles.push({
        tileId: item.id,
        tileName: item.itemName,
        groupId: item.groupId,
        isDefault: item.isDefault,
        value: item.value,
        user: !!item.config?.saved
    })
}

console.log(output);