提高我的數據轉換函數的可重用性

Question

我目前已經通過其 roleId 對我的 api 數據進行了代碼轉換。 但是，我需要顯示另一個視圖，該視圖將根據用戶所在的 projectId 對數據進行分組。

我可以簡單地復制和粘貼並創建另一個用於 projectIds 數據轉換的方法，但是，我覺得我的方法可能很混亂並且不容易重用。 所以我想問是否有更好的方法來做到這一點？

因為我不能簡單地將function 中的roleIds 交換為projectIds，方法是將rolesId 或projectIds 放入要在function 中重用的變量中。

任何人都可以幫助我嗎？

ant 設計樹數據表中顯示的 api 數據轉換代碼：

let apiData = [
  {
    email: "alyssayo@xxx.com",
    permissionIds: null,
    roleIds: ["raa", "baa", "caa"],
    projectIds: ["1aa", "3aa"]
  },
  {
    email: "chiuewww@xxx.com",
    permissionIds: null,
    roleIds: ["baa", "caa"],
    projectIds: ["1aa", "2aa", "3aa"]
  },
  {
    email: "lalaqq@xxx.com",
    permissionIds: null,
    roleIds: ["caa"],
    projectIds: ["1aa"]
  },
  {
    email: "sqssq@xxx.com",
    permissionIds: null,
    roleIds: [],
    projectIds: []
  }
];

        //Isolate and transform data by roleId
        const transData = apiData.reduce((arr, item) => {
          let formatted = item.roleIds.map((id) => {
            return {
              roleIds: id,
              children: [{ ...item, roleIds: id }]
            };
          });

          return [...arr, ...formatted];
        }, []);

        //Group transformed data by roleIds
        const findMatch = (arr, roleIds) =>
          arr.find((item) => item.roleIds === roleIds);

        const groupArray = (originalArr) => {
          return Array.isArray(originalArr)
            ? originalArr.reduce((previousObj, obj) => {
              if (findMatch(previousObj, obj.roleIds)) {
                findMatch(previousObj, obj.roleIds).children.push(...obj.children);
              } else {
                previousObj.push(obj);
              }
              return previousObj;
            }, [])
            : "Need an array";
        };
        //Call the group roleId function on transformed data by roleId
        const userRoledata = groupArray(transData);

        //Add key to parent and children
        let key = 1;
        userRoledata.forEach((item) => {
          item.key = key++;
          item.children.forEach((child) => {
            child.key = key++;
          });
        });

        setData(userRoledata); //this will be dataSource for table rendering in ant design

在 ant 設計中用作 dataSource 時，轉換后的數據會顯示什么：

如果按 roleIds 分組：

[
  {
    "roleIds": "raa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "raa",
        "projectIds": [
          "1aa",
          "3aa"
        ],
        "key": 2
      }
    ],
    "key": 1
  },
  {
    "roleIds": "baa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "baa",
        "projectIds": [
          "1aa",
          "3aa"
        ],
        "key": 4
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": "baa",
        "projectIds": [
          "1aa",
          "2aa",
          "3aa"
        ],
        "key": 5
      }
    ],
    "key": 3
  },
  {
    "roleIds": "caa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": [
          "1aa",
          "3aa"
        ],
        "key": 7
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": [
          "1aa",
          "2aa",
          "3aa"
        ],
        "key": 8
      },
      {
        "email": "lalaqq@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": [
          "1aa"
        ],
        "key": 9
      }
    ],
    "key": 6
  }
]

如果按 projectIds 分組：

[
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "1aa",
        "key": 2
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "1aa",
        "key": 3
      },
      {
        "email": "lalaqq@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "caa"
        ],
        "projectIds": "1aa",
        "key": 4
      }
    ],
    "key": 1
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "raa",
          "baa",
          "caa"
        ],
        "projectIds": "3aa",
        "key": 6
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "3aa",
        "key": 7
      }
    ],
    "key": 5
  },
  {
    "projectIds": "2aa",
    "children": [
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": [
          "baa",
          "caa"
        ],
        "projectIds": "2aa",
        "key": 9
      }
    ],
    "key": 8
  }
]

Answer 1

function transform(apiData, transformation_key) {

  if (!(transformation_key == 'roleIds' || transformation_key == 'projectIds')) throw new Error("Choose either 'roleIds' or 'projectIds' as a transformation_key")

  const transformedObject = apiData
    .reduce((obj, item) => {
      return item[transformation_key].reduce((cur, id) => {
        if (!cur[id]) cur[id] = []
        cur[id].push({
          ...item,
          [transformation_key]: id
        })
        return cur
      }, obj)
    }, {});
    
  return Object.keys(transformedObject).reduce((array, key) => {
    array.push({
      [transformation_key]: key
      children: transformedObject[key]
    })
    return array
  }, [])
}

const transDataByRoleIds = transform(res.data, 'roleIds')
const transDataByProjectIds = transform(res.data, 'projectIds')