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

这篇具有很好参考价值的文章主要介绍了js对map排序,后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

  • [
        {
            "2020": [
                {
                    "id": 39,
                    "createTime": "2020-10-15T22:29:20.016",
                    "year": 2020,
                    "monthDay": "10-15",
                    "title": "冒泡排序"
                },
                {
                    "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": "### 博客"
                }
            ]
        }
    ]
    
  • 浏览器获取结果变成了:

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0vkNViJ4-1683592135147)(C:\Users\quyanliang\AppData\Roaming\Typora\typora-user-images\1683592070705.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)
    
  • 可以从打印信息看出来已经正确排序了:

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7mKsFXf-1683592135147)(C:\Users\quyanliang\AppData\Roaming\Typora\typora-user-images\1683592110064.png)]文章来源地址https://www.toymoban.com/news/detail-446257.html

到了这里,关于js对map排序,后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端返回文件流,前端怎么导出、下载

            工作中肯定有很多导出excel、下载文件这种功能。一般都是后端做好,我们去请求对应的接口就行了,前端还需要做一些处理就可以实现导出、下载功能了。具体怎么操作呢,我们来看看!         我们在请求的时候 需要定义responseType【响应类型】为blob类型,如果

    2024年02月12日
    浏览(55)
  • 后端返回URL,前端如何实现下载

    1. 在实际开发过程中,实现文件下载功能,后端一般是返回一个文件流,我们只需要拿到这个文件流后,再使用 new Blob转化成blob格式 的数据,然后 创建一个a链接元素 进行下载就行了: (“本段代码是之前写案例时从别处copy的,都有注释省了自己写,哈哈哈,侵删”) 2. 但

    2024年02月04日
    浏览(43)
  • 前端实现动态路由(前端控制全部路由,后端返回用户角色)

    优点: 不用后端帮助,路由表维护在前端 逻辑相对比较简单,比较容易上手 权限少的系统用前端鉴权更加方便 缺点: 线上版本每次修改权限页面,都需要重新打包项目 大型项目不适用 如果需要在页面中增加角色并且控制可以访问的页面,则不能用前端鉴权 1、前端定义静态

    2024年02月10日
    浏览(39)
  • 【Vue】后端返回文件流,前端预览文件

      文件预览效果

    2024年01月17日
    浏览(48)
  • 后端java 如何返回给前端 JSON数据

    在上述代码中,@ResponseBody注解用于将Java List对象转换为JSON格式的数据,并返回给前端。Spring会自动将List对象转换为JSON格式的数组,其中每个元素都是一个JSON对象。在本例中,每个JSON对象都包含一个name属性和一个age属性。 Regenerate

    2024年02月15日
    浏览(42)
  • 后端返回base64文件前端如何下载

    1.后端返回base64格式文件 2.前端代码 3.请求封装

    2024年02月05日
    浏览(59)
  • Java后端返回PDF预览给前端

    前端要预览服务器PDF 可直接将要blob流返回给前端 即可用浏览器自带pdf预览功能打开,现有两种方式 方式1 返回blob流给前端 代码如下        此时 前端解析可直接拿返回的文件流 例子如下 但有的时候 不想返回文件流 可把文件返回为base64 (注意 base64可能超长)此时代码修

    2024年02月08日
    浏览(55)
  • mybatisPlus返回Map类型的集合(两列字段,一列为key,一列为value)

    1、自定义实现该类 2、在抽象dao层书写返回map集合类型的方法 3、在XXXDao.xml文件中书写sql语句和resultMap类型 4、如何使用

    2024年02月13日
    浏览(72)
  • 后端返回图片,前端接收并显示的解决方案

    后端通过二进制流的形式,写入response中 controller层 service层 axios接受数据时,responseType 默认返回数据类型是 json,必须将其改为返回数据类型 blob。否则axois无法正确解析数据。 这里的http.request是对axios的封装,把他当作axios用就行 vue界面渲染 后端接口,最好不要有返回值,

    2024年02月12日
    浏览(53)
  • Java后端向前端返回文件流——实现下载功能!

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包