如何重新映射要在 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);