记录一次Chrome浏览器自动排序ajax请求的JSON数据问题

文章目录

  • 1.前言
  • 2. 为什么会这样?
  • 3.如何解决?

1.前言

作者作为新人入职的第一天,mentor给了一个维护公司运营平台的小需求,具体需求是根据运营平台的某个管理模块所展示记录的某些字段对展示记录做排序。
第一步: mybatis plus组装排序查询sql,得到排序后的展示记录
第二步: 使用LinkedHashMap根据插入顺序排序,装载展示记录后转成json返回给前端(key为记录的id)
最终展示在Chrome浏览器的结果是未排序的原始数据,相当于我查询时候的排序白做了。

2. 为什么会这样?

这主要是因为ECMAScript 6(ES6)规范中明确定义了对象属性的枚举顺序。当对象的属性名都是数字或字符串时,这些属性会按照属性名在字符编码中的顺序进行排序。Chrome浏览器遵循了这一规范,因此在处理JSON数据时会自动按键值排序。
假设你原来的JSON数据是这样的:

{"4": "444","1": "111","6": "66","9": "9"
}

浏览器会自动将其排序为:

{"1": "111","4": "444","6": "66","9": "9"
}

3.如何解决?

我的解决方案是修改数据结构,避免使用直接以数字或字符串作为键的对象。数据结构转为List结构,其中每个元素都是一个包含键值对的对象。这样,自己就可以控制数据的顺序,而不用担心浏览器会自动排序。
json格式如下:

[{"id": 4, "name": "444"},{"id": 1, "name": "111"},{"id": 6, "name": "66"},{"id": 9, "name": "9"}
]

啊啊啊啊啊啊,一开始没忘这方面想,硬控我好久。。。。。,希望能够帮助到后面遇到相同问题的朋友

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/367051.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析如何在企业中发挥价值

数据分析如何在企业中发挥价值 数据分析的目的是什么为什么怎么做做什么 思考问题流程确认问题拆解问题量化分析 分析数据流程收集数据处理数据制作图表 全流程 数据分析的目的 是什么 通过数据量化企业当前的经营现状或业务事实,将业务细节转换为具体数据&#xf…

爬虫cookie是什么意思

“爬虫 cookie”指的是网络爬虫在访问网站时所使用的cookie,网络爬虫是一种自动化程序,用于在互联网上收集信息并进行索引,这些信息可以用于搜索引擎、数据分析或其他目的。 本教程操作系统:Windows10系统、Dell G3电脑。 “爬虫…

数据库取出来的日期格式是数组格式,序列化日期格式

序列化前,如图所示: 解决方式,序列化日期(localdatetime)格式 步骤一、添加序列化类 package com.abliner.test.common.configure;import com.alibaba.fastjson.serializer.JSONSerializer; import com.alibaba.fas…

Python编写简单爬虫

文章目录 Python编写简单爬虫安装必要的库编写爬虫代码解析和存储数据注意事项 Python编写简单爬虫 安装必要的库 在开始编写爬虫之前,你需要安装一些必要的库。我们将使用requests库来发送HTTP请求,使用BeautifulSoup库来解析HTML内容。你可以使用以下…

fiddler抓https包

1,安装fiddler省略 2,下载证书步骤:tools-options-https 点击确认,点击OK,点击是 把证书安装到谷歌浏览器上步骤:点击谷歌浏览器右上角的设置,在搜索框中搜索证书,点击“证书管理”…

win10下Python的安装和卸载

前言 之前电脑上安装了python3.9版本,因为工作需要使用3.6版本的Python,需要将3.9版本卸载,重新安装3.6版本。下面就是具体的操作步骤: 1. 卸载 在我的电脑中搜索到3.9版本的安装文件,如下图: 双击该应用程序&#xf…

DevOps认证是什么?DevOps工具介绍

DevOps 这个词是由Development(开发) 和 Operations(运维)组合起来的,你可以把它理解成为一种让开发团队和运维团队紧密合作的方法。 DevOps从2009年诞生到现在已经14年多了,一开始大家还在摸索&#xff0…

马斯克宣布xAI将在8月份推出Grok-2大模型 预计年底推出Grok-3

在今年内,由特斯拉创始人马斯克创立的人工智能初创公司xAI将推出两款重要产品Grok-2和Grok-3。马斯克在社交平台上透露了这一消息,其中Grok-2预计在今年8月份面世,而Grok-3则计划于年底前亮相。 除此之外,马斯克还表示&#xff0c…

WLAN的WPA3安全技术

Wi-Fi安全加密的演进下图所示,当前最新的加密方式是WPA3。WPA3对现有网络提供了全方位的安全防护,增强了公共网络、家庭网络和802.1X企业网的安全性。 WPA3的核心为对等实体同时验证方式(Simultaneous Authentication of Equals, SAE),即通信…

Android AlertDialog对话框

目录 AlertDialog对话框普通对话框单选框多选框自定义框 AlertDialog对话框 部分节选自博主编《Android应用开发项目式教程》(机械工业出版社)2024.6 在Android中,AlertDialog弹出对话框用于显示一些重要信息或者需要用户交互的内容。 弹出…

双目摄像头测距

Opencv双目校正函数 stereoRectify 详解 参数说明: 输入参数: cameraMatrix1:左目相机内参矩阵 distCoeffs1:左目相机畸变参数 cameraMatrix2:右目相机内参矩阵 distCoeffs2:右目相机畸变参数 imageSize&…

使用 ADB 查看 Android 设备的 CPU 使用率(详解)

在 Android 开发和调试过程中,监控设备的性能数据至关重要。CPU 使用率是一个关键的性能指标,它能够帮助开发者识别应用的性能瓶颈和优化机会。本文将详细介绍如何使用 Android Debug Bridge (ADB) 查看设备的 CPU 使用率,并解释终端上各个参…

LLM指令微调Prompt的最佳实践(二):Prompt迭代优化

文章目录 1. 前言2. Prompt定义3. 迭代优化——以产品说明书举例3.1 产品说明书3.2 初始Prompt3.3 优化1: 添加长度限制3.4 优化2: 细节纠错3.5 优化3: 添加表格 4. 总结5. 参考 1. 前言 前情提要: 《LLM指令微调Prompt的最佳实践(一)&#…

用MySQL+node+vue做一个学生信息管理系统(四):制作增加、删除、修改的组件和对应的路由

1.下载依赖: npm install vue-router 在src目录下新建一个文件夹router,在router文件夹下新建一个文件router.js文件,在component目录下新建增加删除和修改的组件,引入router.js当中 此时的init组件为主页面((二、三&…

TOGAF培训什么内容?参加TOGAF培训有什么好处?考试通过率多少?

TOGAF培训什么内容?参加TOGAF培训有什么好处?考试通过率多少? TOGAF培训哪些内容? 通过本课程,你将掌握TOGAF的理论和实践,理解企业架构的影响,能够评估、启动、设 计、执行新一轮企业和IT架构…

1:25万基础电子地图(西藏版)

我们为你分享过四川版、云南版、江西版、贵州版、重庆版和青海版的1比25万基础电子地图,现在再为你分享西藏版的电子地图。 如果你需要西藏版的1比25万基础电子地图,你可以在文末查看该数据的领取方法。 基础电子地图西藏版 西藏版1:25万基础电子地图…

Java中的类加载器

类加载器 1.什么是类加载器? 启动类加载器(Bootstrap ClassLoader):这是JVM自带的类加载器,负责加载Java的核心类库,如rt.jar等。由于安全原因,启动类加载器加载的类不能被其他类加载器加载的类…

试用笔记之-免费的汇通餐饮管理软件

首先下载免费的汇通餐饮管理软件: http://www.htsoft.com.cn/download/htcanyin.exe 安装后的图标 登录软件,默认没有密码 汇通餐饮管理软件主界面 汇通餐饮软件前台系统 点菜

eclipse断点调试(用图说话)

eclipse断点调试(用图说话) debug方式启动项目,后端调试bug调试 前端代码调试,请参考浏览器断点调试(用图说话) 1、前端 选中一条数据,点击删除按钮 2、后端接口打断点 断点按钮 介绍 resum…

前端知识点

HTML、CSS 相关 1、 BFC 1、BFC 是什么? BFC(Block Formatting Context) 格式化上下文; 指一个独立的渲染区域,或者说是一个隔离的独立容器;可以理解为一个独立的封闭空间。无论如何不会影响到它的外面 …