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

Question

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

后端返回的数据是按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处理但是没生效，反而更错乱了。

Answer 1

先按 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 2

你应该提供你的 sort 方法啊

给你一个比较简单的办法直接上 lodash

https://www.lodashjs.com/docs/lodash.sortBy#_sortbycollection...