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


目录
相关文章
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
301 0
|
9月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
352 8
|
9月前
|
JavaScript 前端开发 容器
|
9月前
|
JavaScript 前端开发
|
9月前
|
存储 JavaScript 前端开发
|
9月前
|
移动开发 JavaScript 前端开发
|
9月前
|
存储 JavaScript 前端开发
|
9月前
|
JavaScript 前端开发
|
9月前
|
存储 JavaScript 前端开发

热门文章

最新文章