根据对象数组属性将数组对象分割成多个数组

约定不等于承诺〃 2023-02-21 11:57 165阅读 0赞

场景：

已选组织类型数据（这里包含多个不同的组织类型），前端需要展示不同组织类型下，已选的组织数据。

分析：

后端返回的是一个没有分组的对象数组，前端需要实现根据对象数组中对象的某个属性进行分类显示。

举例：

后端返回的数据结构如：

  1. [{
  2.     CreateTime: "2020-06-22 16:36:11"
  3.     OrgType: "财务"
  4.     OrgTypeCode: "5"
  5.     Count: "1000"
  6.     UpdateTime: "2020-06-22 16:36:11"
  7. },
  8. {
  9.     CreateTime: "2020-06-22 16:36:11"
  10.     OrgType: "人事"
  11.     OrgTypeCode: "4"
  12.     Count: "5"
  13.     UpdateTime: "2020-06-22 16:36:11"
  14. },
  15. {
  16.     CreateTime: "2020-06-22 16:36:11"
  17.     OrgType: "技术"
  18.     OrgTypeCode: "3"
  19.     Count: "99"
  20.     UpdateTime: "2020-06-22 16:36:11"
  21. },
  22. {
  23.     CreateTime: "2020-06-22 16:36:11"
  24.     OrgType: "人事"
  25.     OrgTypeCode: "4"
  26.     Count: "10"
  27.     UpdateTime: "2020-06-22 16:36:11"
  28. }...]

前端需要拿到的是多个数组。

相关代码：

  1. //根据数组对象属性分割成多个数组(已选组织进行分组显示)
  2.     classify(arr){
  3.         //console.log("classify",arr);
  4.         let obj = {}
  5.         arr.map(v => {
  6.             obj[v.OrgType] = 0  
  7.         })
  8.         let OrgTypeArr = Object.keys(obj)
  9.         // console.log('OrgTypeArr', OrgTypeArr)
  10.         let result = OrgTypeArr.map(v => {
  11.             return {
  12.             data: arr.filter(_v => v == _v.OrgType)
  13.             }
  14.         })
  15.         return result
  16.     },

分割后的数据结构

  1. [{
  2.    data:[
  3.         {
  4.             CreateTime: "2020-06-22 16:36:11"
  5.             OrgType: "财务"
  6.             OrgTypeCode: "5"
  7.             Count: "1000"
  8.             UpdateTime: "2020-06-22 16:36:11"      
  9.         }
  10.     ]
  11. },
  12. {
  13.     data:[
  14.         {
  15.              CreateTime: "2020-06-22 16:36:11"
  16.              OrgType: "人事"
  17.              OrgTypeCode: "4"
  18.              Count: "5"
  19.              UpdateTime: "2020-06-22 16:36:11"        
  20.         },
  21.         {
  22.              CreateTime: "2020-06-22 16:36:11"
  23.              OrgType: "人事"
  24.              OrgTypeCode: "4"
  25.              Count: "10"
  26.              UpdateTime: "2020-06-22 16:36:11"
  27.         }
  28.     ]
  29. },
  30. {
  31.     data:[
  32.         {
  33.             CreateTime: "2020-06-22 16:36:11"
  34.             OrgType: "技术"
  35.             OrgTypeCode: "3"
  36.             Count: "99"
  37.             UpdateTime: "2020-06-22 16:36:11"
  38.         }
  39.     ]
  40. }]

我们可以通过遍历这个数组，获取到我们需要的数据

发表评论

表情：
评论列表 （有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读