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

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

请问各位大佬，后端给的数据是这样的：

[JavaScript] 纯文本查看 复制代码

[
    {
        "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"
    }
    
]

我想要这种格式的：

[JavaScript] 纯文本查看 复制代码

{
	"后勤部": {
		"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

建议让后端处理。

[HTML] 纯文本查看 复制代码

<!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[v] = { employees: [] };
      });
      oldList.forEach((v) => {
        newList[v.PhoneUnit].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

[JavaScript] 纯文本查看 复制代码

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[item.PhoneUnit].employees.push(item)
        } else {
          result[item.PhoneUnit] = { employees: [item] }
        }
      })

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

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

这个就很棒~

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

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

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

[JavaScript] 纯文本查看 复制代码

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 => ({ [key]: { employees: res.filter(el => el.PhoneUnit === key) } }))
result = result.length ? result.reduce((a, b) => ({ ...a, ...b })) : result

帐号		自动登录	找回密码
密码			注册[Register]

saszznz saszznz 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	saszznz 发表于 2023-1-28 13:47 《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！提示: 作者被禁止或删除内容自动屏蔽
	呼吁大家发布原创作品添加吾爱破解论坛标识！
	回复举报

[求助] JavaScript数据处理（对象数组操作生成新数组）

最佳答案

免费评分