Question

我有以下格式的传入数据：

  "data": [
    {
      "id": 4,
      "name": "Report name 1",
      "groupName": "group1",
      "rank": 2
    },
    {
      "id": 5,
      "name": "Report name 2",
      "groupName": "group1",
      "rank": 1
    },
    {
      "id": 4,
      "name": "Report name 3",
      "groupName": "group1",
      "rank": 2
    },
    {
      "id": 6,
      "name": "Report name 1",
      "groupName": "group2",
      "rank": 2
    },
    {
      "id": 10,
      "name": "Report name 2",
      "groupName": "group2",
      "rank": 4
    },
    { "id": 15, "name": "Report name 3" },
    { "id": 13, "name": "Report name 4" },
    { "id": 16, "name": "Report name 5" }
  ]
}

这些是报告，必须根据组名将它们分组。他们也可能根本没有群组名称-在这种情况下，它们必须由名称为“其他”的群组组织

我想要的格式：

 const formattedData = [
  {
    title: 'group1',
    reports: [
      { id: 4, name: 'Report name 1', groupName: 'group1', rank: 2 },
      { id: 5, name: 'Report name 2', rank: 1 },
      { id: 4, name: 'Report name 3', rank: 2 },
    ],
  },
  {
    title: 'group2',
    reports: [
      { id: 6, name: 'Report name 1', rank: 2 },
      { id: 10, name: 'Report name 2', rank: 4 },
    ],
  },
  {
    title: 'others',
    reports: [
      { id: 15, name: 'Report name 3' },
      { id: 13, name: 'Report name 4' },
      { id: 16, name: 'Report name 5' },
    ],
  },
];

我试图通过这种方式来完成它，但是有很多样板甚至还没有完成功能

          if (formattedData.find((group) => group.title === report.groupName)) {
            formattedData
              .find((group) => group.title === report.groupName)
              .reports.push({
                id: report.id,
                name: report.name,
                rank: report.rank,
              });
          } else
            formattedData
              .find((group) => group.title === 'others')
              .reports.push({
                id: report.id,
                name: report.name,
                rank: report.rank,
              });
        });

以理想的格式组织内容的最佳方法是什么？

Answer 1

您可以与一个对象分组。

const
    data = [{ id: 4, name: "Report name 1", groupName: "group1", rank: 2 }, { id: 5, name: "Report name 2", groupName: "group1", rank: 1 }, { id: 4, name: "Report name 3", groupName: "group1", rank: 2 }, { id: 6, name: "Report name 1", groupName: "group2", rank: 2 }, { id: 10, name: "Report name 2", groupName: "group2", rank: 4 }, { id: 15, name: "Report name 3" }, { id: 13, name: "Report name 4" }, { id: 16, name: "Report name 5" }],
    result = Object.values(data.reduce((r, o) => {
        const title = o.groupName || 'others';
        if (!r[title]) r[title] = { title, reports: [] };
        r[title].reports.push(o);
        return r;
    }, {}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以使用reduce遍历数据并将其分组，还可以使用辅助函数根据需要格式化报告：

functon formatReport(report){
  const {id, name, rank} = report;
  const formattedReport = {
    id,
    name
  };
  if (rank !== undefined){
    formattedReport.rank = rank;
  }
  return formattedReport;
} 

const groupedData = data.reduce(( groups, currentElement ) => {
  const { groupName = "others"} = currentElement;

  if (!groups[groupName]){
    groups[groupName] = [];
  }
  groups[groupName].push(formatReport(currentElement))
  return groups;
}, {});

输出看起来像这样：

{
  group1: [
    { id: 4, name: 'Report name 1', rank: 2 },
    { id: 5, name: 'Report name 2', rank: 1 },
    { id: 4, name: 'Report name 3', rank: 2 }
  ],
  group2: [
    { id: 6, name: 'Report name 1', rank: 2 },
    { id: 10, name: 'Report name 2', rank: 4 }
  ],
  others: [
    { id: 15, name: 'Report name 3' },
    { id: 13, name: 'Report name 4' },
    { id: 16, name: 'Report name 5' }
  ]
}

从那里，您可以再次使用reduce来获得所需的输出：

const formattedData = Object.entries(groupedData)
.reduce(( reportArray,[title, reports] ) =>([...reportArray, {title, reports}]),[])

根据组名将信息从一个阵列复制到另一个阵列

2 个答案: