JavaScript数据处理（对象数组操作生成新数组）

a1chemy 发表于 2023-1-28 11:46

请问各位大佬，后端给的数据是这样的：
[
{
   "Id": 11,
   "PhoneUnit": "后勤部",
   "PhoneName": "张三",
   "Phone": "19100000000"
},
{
   "Id": 12,
   "PhoneUnit": "后勤部",
   "PhoneName": "李四",
   "Phone": "19100000001"
},
{
   "Id": 13,
   "PhoneUnit": "开发部",
   "PhoneName": "王五",
   "Phone": "19100000002"
},
{
   "Id": 14,
   "PhoneUnit": "开发部",
   "PhoneName": "孙权",
   "Phone": "19100000003"
},
{
   "Id": 15,
   "PhoneUnit": "办公室",
   "PhoneName": "张飞",
   "Phone": "19100000004"
}

]
我想要这种格式的：
{
"后勤部": {
"employees": [
{
"Id": 11,
"PhoneUnit": "后勤部",
"PhoneName": "张三",
"Phone": "19100000000"
},
{
"Id": 12,
"PhoneUnit": "后勤部",
"PhoneName": "李四",
"Phone": "19100000001"
}
]
},
"开发部": {
"employees": [
{
"Id": 13,
"PhoneUnit": "开发部",
"PhoneName": "王五",
"Phone": "19100000002"
},
{
"Id": 14,
"PhoneUnit": "开发部",
"PhoneName": "孙权",
"Phone": "19100000003"
}
]
},
"办公室": {
"employees": [
{
"Id": 15,
"PhoneUnit": "办公室",
"PhoneName": "张飞",
"Phone": "19100000004"
}
]
}
}
新手一个，还请大佬教一下，非常感谢！

waf642311 发表于 2023-1-28 11:46

建议让后端处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
   var oldList = [
   {
      Id: 11,
      PhoneUnit: '后勤部',
      PhoneName: '张三',
      Phone: '19100000000',
   },
   {
      Id: 12,
      PhoneUnit: '后勤部',
      PhoneName: '李四',
      Phone: '19100000001',
   },
   {
      Id: 13,
      PhoneUnit: '开发部',
      PhoneName: '王五',
      Phone: '19100000002',
   },
   {
      Id: 14,
      PhoneUnit: '开发部',
      PhoneName: '孙权',
      Phone: '19100000003',
   },
   {
      Id: 15,
      PhoneUnit: '办公室',
      PhoneName: '张飞',
      Phone: '19100000004',
   },
   ];

   var keys = new Set(oldList.map((v) => v.PhoneUnit));
   var newList = [];
   keys.forEach((v) => {
   newList = { employees: [] };
   });
   oldList.forEach((v) => {
   newList.employees.push(v);
   });
   console.log(newList);
</script>
</body>
</html>

feiyu361 发表于 2023-1-28 13:40

你让后端按照这种格式给你就行

saszznz 发表于 2023-1-28 13:47

npc404 发表于 2023-1-28 13:52

let arr = [
   {
      Id: 11,
      PhoneUnit: '后勤部',
      PhoneName: '张三',
      Phone: '19100000000',
   },
   {
      Id: 12,
      PhoneUnit: '后勤部',
      PhoneName: '李四',
      Phone: '19100000001',
   },
   {
      Id: 13,
      PhoneUnit: '开发部',
      PhoneName: '王五',
      Phone: '19100000002',
   },
   {
      Id: 14,
      PhoneUnit: '开发部',
      PhoneName: '孙权',
      Phone: '19100000003',
   },
   {
      Id: 15,
      PhoneUnit: '办公室',
      PhoneName: '张飞',
      Phone: '19100000004',
   },
   ]
   const result = {}
   arr.forEach(item => {
   if (item.PhoneUnit in result) {
      result.employees.push(item)
   } else {
      result = { employees: }
   }
   })

Justin0110 发表于 2023-1-29 09:14

npc404 发表于 2023-1-28 13:52
let arr = [
{
Id: 11,

这个就很棒~

iLouis 发表于 2023-1-30 13:28

碰到这种情况我一般会让后端以我要的方式给数据给我。
除了三种情况：
一、这份数据我多处使用，而且是不同格式，反正都是要重新格式化的。
二、后端不在，情况紧急。
三、还在开发阶段，后端还没搞定之前，先自己格式化，继续写后面的，等到后端改好，我这边把格式化去掉。

我一般会这么处理，因为大部分情况下，key还是有用的，我会先把key先提出来。

const resData = [{
"Id": 11,
"PhoneUnit": "后勤部",
"PhoneName": "张三",
"Phone": "19100000000"
}, {
"Id": 12,
"PhoneUnit": "后勤部",
"PhoneName": "李四",
"Phone": "19100000001"
}, {
"Id": 13,
"PhoneUnit": "开发部",
"PhoneName": "王五",
"Phone": "19100000002"
}, {
"Id": 14,
"PhoneUnit": "开发部",
"PhoneName": "孙权",
"Phone": "19100000003"
}, {
"Id": 15,
"PhoneUnit": "办公室",
"PhoneName": "张飞",
"Phone": "19100000004"
}
]
const keyList = Array.from(new Set(res.map(el => el.PhoneUnit)))
let result = keyList.map(key => ({ : { employees: res.filter(el => el.PhoneUnit === key) } }))
result = result.length ? result.reduce((a, b) => ({ ...a, ...b })) : result

页: [1]

吾爱破解 - 52pojie.cn's Archiver

JavaScript数据处理（对象数组操作生成新数组）