js对map排序,后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法

简介: 在后端进行时间倒序查询后,返回map类型的数据,在postman获取是这样:

在后端进行时间倒序查询后,返回map类型的数据,在postman获取是这样:

[
    {
        "2020": [
            {
                "id": 39,
                "createTime": "2020-10-15T22:29:20.016",
                "year": 2020,
                "monthDay": "10-15",
                "title": "java数据结构61:冒泡排序"
            },
            {
                "id": 37,
                "createTime": "2020-10-14T11:44:12.163",
                "year": 2020,
                "monthDay": "10-14",
                "title": "这是博客标题13"
            }
        ],
        "2019": [
            {
                "id": 28,
                "createTime": "2019-10-15T18:57:41.409",
                "year": 2019,
                "monthDay": "10-15",
                "title": "这是博客标题5"
            },
            {
                "id": 27,
                "createTime": "2019-10-15T18:57:38.442",
                "year": 2019,
                "monthDay": "10-15",
                "title": "这是博客标题4"
            },
            {
                "id": 26,
                "createTime": "2019-10-15T18:57:36.086",
                "year": 2019,
                "monthDay": "10-15",
                "title": "这是博客标题3"
            }
        ],
        "2018": [
            {
                "id": 25,
                "createTime": "2018-10-15T18:57:31.986",
                "year": 2018,
                "monthDay": "10-15",
                "title": "这是博客标题2"
            },
            {
                "id": 24,
                "createTime": "2018-10-15T18:57:27.428",
                "year": 2018,
                "monthDay": "10-15",
                "title": "这是博客标题1"
            }
        ],
        "2017": [
            {
                "id": 12,
                "createTime": "2017-10-14T11:44:12.163",
                "year": 2017,
                "monthDay": "10-14",
                "title": "### 锟桑的第一篇博客"
            }
        ]
    }
]


浏览器获取结果变成了:

20201017150929907.png


所以后端就算进行了排序处理,但是浏览器还是有自己的想法,在这里就要进行前端处理了:

                    //先把获取到的json对象转成map
                    let map = new Map();
                    //archive就是接口返回的json对象
                    for (let year in archive) {
                        map.set(year,archive[year]);
                    }
                    //把map转换为array就可以排序了
                    let arr = Array.from(map);
                    arr.sort(function (a,b) {
                        //map转成array后,下标0为key,下标1为value
                        //这里根据年份进行倒序排序
                        return b[0]-a[0];
                    });
                    console.log(arr)


可以从打印信息看出来已经正确排序了:

20201017151708354.png


虽然解决了问题,但是这无疑会增加前端的工作量,所以推荐的做法是,在后端再定定义个类,比如:

public class ArchivePlusVo {
    private String year;
    private List<ArchiveVo> list;
}


然后把要返回的Map对象转换成List<ArchivePlusVo>再返回就好了。


目录
相关文章
|
10天前
|
Web App开发 缓存 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第26天】本文将引导你了解Node.js的基本原理,并通过实际案例展示如何在后端开发中应用它。我们将从Node.js的核心概念讲起,逐步深入到构建一个完整的后端服务,最后探讨如何优化你的Node.js应用。准备好让你的开发技能更上一层楼了吗?让我们一起潜入Node.js的世界!
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
1天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第35天】本文将带你走进Node.js的世界,探索这个强大的后端开发平台。我们将从基础开始,逐步深入,最后以一个简单的代码示例结束,让你对Node.js有更深入的理解。无论你是前端开发者还是后端开发者,这篇文章都将为你提供有价值的信息。让我们一起开启Node.js的学习之旅吧!
|
13天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第23天】在这篇文章中,我们将探索Node.js的世界,了解它如何改变后端开发的面貌。通过实际案例和代码示例,我们不仅学习Node.js的核心概念,还会深入探讨它的高级特性,如异步编程、事件驱动模型以及微服务架构的应用。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和实用技能,帮助你构建更高效、可扩展的后端系统。
46 19
|
1天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第35天】本文将带你走进Node.js的世界,从基础概念到实战应用,一步步揭示Node.js在后端开发中的魅力。我们将通过实际代码示例,让你轻松掌握Node.js的开发技巧,开启你的后端开发之旅。
|
11天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第57天】本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
11天前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
11天前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
11天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第25天】本文将带你了解Node.js的基本概念和核心优势,同时提供一些实际的代码示例来加深理解。无论你是初学者还是有一定经验的开发者,都能通过本文获得有价值的信息和技巧。让我们一起探索Node.js的世界吧!
|
12天前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
29 2
下一篇
无影云桌面