如何对后台返回数据处理成相邻数据展示？

作者站长头像
站长
· 阅读数 9

如何对异步获取数据排序处理？

后端返回的数据是按staff默认排序的：

{
  "code": 0,
  "msg": "success",
  "data": {
    "data": [
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 16,
        "appeal_type_utilization_rate": 0.24,
        "detail_appeal_type": 17,
        "detail_appeal_type_utilization_rate": 0.24,
        "task_id": 248,
        "task_utilization_rate": 0
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 16,
        "appeal_type_utilization_rate": 0.24,
        "detail_appeal_type": 17,
        "detail_appeal_type_utilization_rate": 0.24,
        "task_id": 246,
        "task_utilization_rate": 0
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 1,
        "appeal_type_utilization_rate": 0.02,
        "detail_appeal_type": 2,
        "detail_appeal_type_utilization_rate": 0.02,
        "task_id": 243,
        "task_utilization_rate": 0.02
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 16,
        "appeal_type_utilization_rate": 0.24,
        "detail_appeal_type": 17,
        "detail_appeal_type_utilization_rate": 0.24,
        "task_id": 245,
        "task_utilization_rate": 0
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 9,
        "appeal_type_utilization_rate": 0.12,
        "detail_appeal_type": 10,
        "detail_appeal_type_utilization_rate": 0.12,
        "task_id": 241,
        "task_utilization_rate": 0
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 9,
        "appeal_type_utilization_rate": 0.12,
        "detail_appeal_type": 10,
        "detail_appeal_type_utilization_rate": 0.12,
        "task_id": 242,
        "task_utilization_rate": 0.12
      },
      {
        "date": "2024-02-28-2024-02-28",
        "staff": "li",
        "sum_utilization_rate": 0.38,
        "appeal_type": 16,
        "appeal_type_utilization_rate": 0.24,
        "detail_appeal_type": 17,
        "detail_appeal_type_utilization_rate": 0.24,
        "task_id": 247,
        "task_utilization_rate": 0.2
      },
    ]
  }
}

前端获取到数据还想根据appeal_type和detail_appeal_type进行排序处理，变成相邻的数据，求教怎么处理，我用sort处理但是没生效，反而更错乱了。

回复
1个回答
avatar
test
2024-06-23

先按 appeal_type 排序, 再在 appeal_type 排序的基础上排序 detail_appeal_type:

const sortedList = list.toSorted((a, b) => a.appeal_type - b.appeal_type).toSorted((a, b) => a.detail_appeal_type - b.detail_appeal_type)

或者排序字段多的话, 可以这样写:

const sortedList = ['appeal_type', 'detail_appeal_type'].reduce((acc, field) => acc.toSorted((a, b) => a[field] - b[field]), list)

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容