优化后台数据，实现前端相邻数据展示
前端开发中，经常需要处理异步获取的后台数据，而后台数据排序可能与前端展示需求不符。例如，后台按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对数据排序。
立即学习“前端免费学习笔记（深入）”；
一种方法是使用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方法，依次按指定字段排序，实现多字段排序。 这种方法更灵活，易于扩展。
通过以上方法，即可按前端需求排序后台数据，实现相邻数据展示。
以上就是前端如何高效排序后台返回的appeal_type和detail_appeal_type相邻数据？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3038119.html
