如何重新映射要在 Ant 设计树中使用的数组

Question

我有这个代码结构：

const data = [
  {
    name: 'Lebron',
    sports: 'Basketball',
  },
  {
    name: 'Durant',
    sports: 'Basketball',
  },
  {
    name: 'Federrer',
    sports: 'Tennis',
  },
  {
    name: 'Nadal',
    sports: 'Tennis',
  },
];

我正在尝试将其转换为：

const treeData = [
  {
    title: 'Select All',
    key: 'All',
    children: [
      {
        title: 'Basketball',
        key: 'Basketball',
        children: [
          {
            title: 'Lebron',
            key: 'Lebron',
          },
          {
            title: 'Durant',
            key: 'Durant',
          },
        ],
      },
      {
        title: 'Tennis',
        key: 'Tennis',
        children: [
          {
            title: 'Federrer',
            key: 'Federrer',
          },
          {
            title: 'Nadal',
            key: 'Nadal',
          },
        ],
      },
    ],
  },
];

在 Ant Design Tree链接中使用。

现在我的计划是让所有的运动都像这样：

let sports = data.map(({ sports }) => sports); 
sports = [...new Set(sports)];

但在那之后我不知道下一步应treeData来实现treeData

Answer 1

const data = [
  {
    name: 'Lebron',
    sports: 'Basketball',
  },
  {
    name: 'Durant',
    sports: 'Basketball',
  },
  {
    name: 'Federrer',
    sports: 'Tennis',
  },
  {
    name: 'Nadal',
    sports: 'Tennis',
  },
];

const dataMap: Record<string, string[]> = {};
data.forEach(({ name, sports }) => {
    dataMap[sports] ??= []
    dataMap[sports].push(name)
})

const treeData = [{
    title: 'Select All',
    key: 'All',    
    children: Object.entries(dataMap).map(([sport, names]) => ({
        title: sport,
        key: sport,
        children: names.map(name => ({
            title: name,
            key: name
        }))
    }))
}]

Answer 2

这是获取最终对象的孩子的两步方法：

首先，使用reduce 创建一个sports/children 对象，其中children 匹配您在最终输出中的内容：

const middle = data.reduce((transformed, item) => {
  if (!transformed[item.sports]) {
    transformed[item.sports] = [];
  }
  transformed[item.sports].push({
    title: item.name,
    key: item.name
  });
  return transformed;
}, {});

然后映射reduce函数的结果来重塑对象：

const results = Object.entries(middle).map(([key, children]) => ({
  title: key,
  key,
  children
}));

Answer 3

您可以使用.reduce()将所有运动累积到Map ，其中每个运动是一个键，运动的每个值是一个关联name的数组。 构建地图后，您可以使用Array.from()将地图转换为所需的children数组。 这可以通过提供一个映射函数作为 Array.from() 的第二个参数来完成，并使用它来将每个条目 ( [key, value] ) 对转换为所需结构的对象。

请参阅下面的示例：

 const data = [ { name: 'Lebron', sports: 'Basketball', }, { name: 'Durant', sports: 'Basketball', }, { name: 'Federrer', sports: 'Tennis', }, { name: 'Nadal', sports: 'Tennis', }, ]; const children = Array.from(data.reduce((m, {name, sports}) => m.set(sports, [...(m.get(sports) || []), name]) , new Map), ([key, arr]) => ({title: key, key, children: arr.map(title => ({title, key: title}))})); const treeData = [{title: 'Select All', key: 'All', children}]; console.log(treeData);