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>再返回就好了。


目录
相关文章
|
4天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js: 打造高效后端服务
【10月更文挑战第39天】在数字化浪潮中,后端开发作为支撑现代Web应用的骨架,扮演着不可或缺的角色。Node.js,作为一种流行的服务器端JavaScript运行环境,因其非阻塞I/O和事件驱动的特性,被广泛应用于构建轻量且高效的后端服务。本文旨在通过浅显易懂的语言,结合生动的比喻和实际代码案例,带领读者深入理解Node.js的核心概念、架构设计及其在后端开发中的应用,进而掌握如何使用Node.js搭建稳定、可扩展的后端服务。无论你是初探后端开发的新手,还是寻求进阶的开发者,这篇文章都将为你提供有价值的指导和启示。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
1月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
15天前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
7天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
12天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
13天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
26 2
|
22天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
41 1
|
10天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
25 0
|
10天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。