前端如何重构后端返回的数据成对象格式

后端返回的数据格式是这样的:

​
//后端返回的数据格式
tableData: [
        {
          date: '2023年10月1日',
          companyName: '数据1',
          total: 50,
          faultCount: 15,
          online: 5,
          road: 10,
          reason: '原因1'
        },
        {
          date: '2023年10月1日',
          companyName: '数据2',
          total: 50,
          faultCount: 15,
          online: 5,
          road: 10,
          reason: '原因2'
        },
        {
          date: '2023年10月2日',
          companyName: '数据1',
          total: 50,
          faultCount: 15,
          online: 5,
          road: 10,
          reason: '原因1'
        },
        {
          date: '2023年10月2日',
          companyName: '数据2',
          total: 50,
          faultCount: 15,
          online: 5,
          road: 10,
          reason: '原因2'
        }
      ],

​

前端要把他处理成对象的格式是这样的

 '2023年10月1日': [
          {
            date: '2023年10月1日',
            companyName: '数据1',
            total: 50,
            faultCount: 15,
            online: 5,
            road: 10
          },
          {
            date: '2023年10月1日',
            companyName: '数据2',
            total: 50,
            faultCount: 15,
            online: 5,
            road: 10
          }
        ]

之前一直没有多使用过reduce来处理数据,这次才发现了他的好处,处理数据非常简单

reduce的第一个参数是一个回调函数包括我们需要的数据类型的数据和当前数据,第二个参数是我们定义回调函数中第一个参数的数据类型是哪种,下面这个就是定义了一个对象类型的数据,都是我的个人见解,如果大家要了解请移步至官方文档

JavaScript reduce() 方法 | 菜鸟教程JavaScript reduce() 方法 JavaScript Array 对象 实例 计算数组元素相加后的总和: [mycode3 type='js'] var numbers = [65, 44, 12, 4]; function getSum(total, num) { return total + num; } function myFunction(item) { docume..icon-default.png?t=N7T8https://www.runoob.com/jsref/jsref-reduce.html

const result = this.tableData.reduce((acc, cur) => {
  const { date, companyName, ...rest } = cur
     if (!acc[date]) {
        acc[date] = []
     }
  acc[date].push({ companyName, ...rest })
  return acc
}, {})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值