优化后台数据，实现前端相邻数据展示

前端开发中，经常需要处理异步获取的后台数据，而后台数据排序可能与前端展示需求不符。例如，后台按staff字段排序，但前端需按appeal_type和detail_appeal_type字段，确保相同appeal_type的数据相邻，且detail_appeal_type按序排列。本文介绍高效的排序方法。

假设后台返回如下JSON数据：

{
  "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
      },
      // ...更多数据
    ]
  }
}

我们需要根据appeal_type和detail_appeal_type对数据排序。

立即学习“前端免费学习笔记（深入）”；

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

一种方法是使用JavaScript的sort方法进行多级排序：先按appeal_type排序，再按detail_appeal_type排序。代码如下：

const list = data.data; // 假设data.data包含JSON数据中的data数组
list.sort((a, b) => a.appeal_type - b.appeal_type);
list.sort((a, b) => a.detail_appeal_type - b.detail_appeal_type);

更通用的方法是使用reduce方法，可以方便地扩展到更多排序字段：

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

这段代码使用reduce方法，依次按指定字段排序，实现多字段排序。 这种方法更灵活，易于扩展。

通过以上方法，即可按前端需求排序后台数据，实现相邻数据展示。