记录一次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.mfbz.cn/a/767455.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python基础篇】一篇文章入门Python,进入Python的世界

文章目录 0.前言1.打印(Hello,World)2.创建变量3.打印升级3.1 打印一句话中间加变量3.2 sep设置分隔符3.3 end和换行 4. 注释 0.前言 大家好,我是小辰,前几天做了个重大的决定,学习python。 首先&#xff0…

博途S7-1500PLC“虚轴“编程应用

1、CODESYS如何添加虚轴 如何添加虚轴(AM400PLC)-CSDN博客文章浏览阅读164次。EtherCAT运动控制总线启用的时候,选择EtherCAT总线任务周期。选择好后,选择点击添加。https://rxxw-control.blog.csdn.net/article/details/139898985虚轴是利用软件算法实现的运动控制轨迹规划…

外挂级OCR神器:免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

智能文档解析:大模型友好的文档解析工具 PDF转Markdown 支持将任意格式的文件(图片、PDF、Doc/Docx、网页等)解析为Markdown或Json格式,以对LLM友好的方式呈现。 更高速度:100页PDF最快1.5s完成解析 更大…

DEBOPIE框架:打造最好的ChatGPT交易机器人

本文介绍了如何利用 DEBOPIE 框架并基于 ChatGPT 创建高效交易机器人,并强调了在使用 AI 辅助交易时需要注意的限制以及操作步骤。原文: Build the Best ChatGPT Trading Bots with my “DEBOPIE” Framework 如今有大量文章介绍如何通过 ChatGPT 帮助决定如何以及在…

Hi3861 OpenHarmony嵌入式应用入门--TCP Server

本篇使用的是lwip编写tcp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点,并且密码为PARAM_HOTSPOT_PSK LwIP简介 LwIP是什么? A Lightweight TCP/IP stack 一个轻量级的TCP/IP协议栈 详细介绍请参考LwIP项目官网:lwIP - A Li…

6.7、函数的分文件编写

mian函数部分代码 #include <iostream> using namespace std; #include <string> #include "swap.h"//函数的分文件编写 //实现两个数字进行交换的函数//函数的声明 //void swap(int a,int b); //函数的定义 //void swap(int a, int b) //{ // int temp…

9. Revit API UI: UIView、UIDocument、框选聚焦

9. Revit API UI: UIView、UIDocument、框选聚焦 UI命名空间下的API&#xff0c;到这里差不多就要讲完了&#xff0c;同Application那篇所讲的几个类与接口&#xff0c;都是带UI的对应了一个不带UI的&#xff0c;如UIApplication和Application&#xff0c;作用呢&#xff0c;也…

Python基于PyQt5和卷积神经网络分类模型(CNN分类算法)实现时装类别识别系统GUI界面项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 随着深度学习技术的发展&#xff0c;计算机视觉领域取得了显著的进步&#xff0c;特别是在图像分类、目…

Java8环境安装(jdk1.8安装)详细教程

Java 8环境安装&#xff08;jdk1.8安装&#xff09;详细教程 Java 8&#xff08;也称为JDK 1.8&#xff09;&#xff0c;是Oracle公司于2014年3月发布的一个重要的Java语言版本。这个版本自发布以来&#xff0c;因其众多的新特性和改进&#xff0c;被认为是Java语言发展历程中…

渗透测试之注入

命令注入 命令注入相关分隔符&#xff1a; 字符说明;仅限Linux环境&#xff0c;用于隔开命令&#xff0c;按顺序执行|前面命令的输出结果作为后面命令的输入内容||前提是前面的命令执行失败&#xff0c;和&&号相反&前后两条命令依次执行&&前提是前面的命…

虚拟机的网络配置

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️ 每一步都向着梦想靠近&#xff0c;坚持就是胜利的序曲 一 …

优化服务,推动企业向前发展

在快速变化的商业环境中&#xff0c;企业的成长离不开优质的服务支持。成都树莓集团&#xff0c;作为数字产业生态链的重要构建者&#xff0c;始终将优化服务、助力企业成长作为自身的核心使命。通过全方位、一站式的服务模式&#xff0c;树莓集团为企业提供强大的支持&#xf…

Idea-Idea配置gitIgnore忽略文件

背景 在项目提交到Git过程中&#xff0c;总有一些文件&#xff0c;例如.idea和.iml等这些我们不想提交的&#xff0c;直接添加进入gitIgnore文件中自动忽略掉。 Idea安装插件 1、在File->Setting->Plugins中搜索gitIgnore并安装插件 2、项目右键new->.ignore File-…

vue实现一个简单的审批绘制功能

1、vue代码 <div class"approval"><div class"approval_ul" v-for"(item,key) in approvalList" :key"key"><div><el-radio-group v-model"item.jointlySign"><el-radio label"1">…

P3374 【模板】树状数组 1

题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行下面两种操作&#xff1a; 将某一个数加上 &#x1d465;x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 &#x1d45b;,&#x1d45a;n,m&#xff0c;分别表示该数列数字的个数和操作的总个数。 …

秋招突击——7/2——复习{}——新作{分割等和子集、不同路径、最小路径和、最长回文子串}

文章目录 引言复习新作分割等和子集个人实现参考实现 不同路径个人实现参考实现 最小路径和个人实现参考实现 最长回文子串个人实现参考实现字符串哈希二分 总结 引言 今天起的挺早的&#xff0c;早上把昨天录得关于JVM的相关八股都听完了&#xff0c;然后还背了一部分八股&am…

用Chromatix进行tuning流程

##一、基本调试 ###1、工程初始配置&#xff1a; 这个工具就是一个图形化的参数编辑器&#xff0c;其实所有tuning中的效果参数直接改文件参数酒醒&#xff0c;工具的好处是&#xff1a;带有检查错误和模拟的功能以及一些校验工具和脚本。 初始化可以中需要的配置&#xff1a;t…

基于Java的音乐网站系统01239

目 录 摘要 1 绪论 1.1 研究背景 1.2系统开发目标、意义 1.3研究内容 2 相关技术介绍 2.1 MySQL数据库 2.2 Java编程语言 2.3 SpringBoot框架介绍 3 系统需求分析与设计 3.1 可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 法律可行性分析 3.2 需…

IP地址定位中多源数据融合的应用

IP地址定位如今在诸如网络安全、地理信息服务、智能交通等领域发挥着关键作用。然而&#xff0c;传统的基于单一数据源&#xff08;如IP数据库&#xff09;的定位方法往往存在精度有限、可靠性不足等问题。多源数据融合技术的出现为解决这些问题提供了新的思路和方法。今天我们…

【机器学习】在【Pycharm】中的实践教程:使用【逻辑回归模型】进行【乳腺癌检测】

目录 案例背景 具体问题 1. 环境准备 小李的理解 知识点 2. 数据准备 2.1 导入必要的库和数据集 小李的理解 知识点 2.2 数据集基本信息 小李的理解 知识点 注意事项 3. 数据预处理 3.1 划分训练集和测试集 小李的理解 知识点 注意事项 3.2 数据标准化 小李…