当前位置: 首页 > news >正文

记录一次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"}
]

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

相关文章:

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

文章目录 1.前言2. 为什么会这样?3.如何解决? 1.前言 作者作为新人入职的第一天,mentor给了一个维护公司运营平台的小需求,具体需求是根据运营平台的某个管理模块所展示记录的某些字段对展示记录做排序。 第一步: myb…...

【嵌入式——FreeRTOS】任务

【嵌入式——FreeRTOS】任务 任务创建和删除动态方式创建任务静态方式创建任务 删除任务任务切换调度器任务切换流程 任务挂起任务恢复相关API函数 任务创建和删除 动态方式创建任务 任务的任务控制块以及任务的栈空间所需的内存,均由freeRTOS从freeRTOS管理的堆中…...

网关,路由器,交换机

一、网关 (Gateway) 是一种设备,用于连接不同网络,能够转发数据包并翻译协议,允许不同类型的网络通信。网关通常工作在OSI模型的应用层或传输层,提供连接和路由服务。 应用场景例子: 在企业网络中,网关可…...

sublime 3 背景和字体颜色修改

sublime 4 突然抽风,每次打开都显示 “plugin_host-3.3 has exited unexpectedly, some plugin functionality won’t be available until Sublime Text has been restarted” 一直没调好,所以我退回到sublime 3了。下载好了软件没问题,但是一…...

leetcode 403周赛 包含所有1的最小矩形面积||「暴力」

3197. 包含所有 1 的最小矩形面积 II 题目描述: 给你一个二维 二进制 数组 grid。你需要找到 3 个 不重叠、面积 非零 、边在水平方向和竖直方向上的矩形,并且满足 grid 中所有的 1 都在这些矩形的内部。 返回这些矩形面积之和的 最小 可能值。 注意…...

Stable Diffusion web UI 插件

2024.7.3更新,持续更新中 如果需要在linux上自己安装sd,参考:stable diffusion linux安装 插件复制到 /stable-diffusion-webui/extensions 目录下,然后重新启动sd即可 一、插件安装方法 每种插件的安装方法可能略有不同&#xf…...

深度学习中的反向传播算法的原理

深度学习中的反向传播算法的原理,以及如何计算梯度 反向传播算法(Backpropagation)是深度学习中最核心的优化技术之一,用于训练神经网络。它基于链式法则,通过从输出层逆向计算误差并逐层传递到输入层来更新模型参数&…...

身处奇瑞看三星:既“开卷“又“起火“,却更难受了

三星"起火" 这几天奇瑞的事情,让大家破防了,纷纷表示国内的就业市场环境普遍恶劣。 那我们转个眼,看看海外企业的情况。 最近一周,三星频频登上新闻,颇有"起火"之势。 在刚步入下半年的 7 月 1 日…...

系统架构设计师教程(清华第2版)<第1章 绪论>解读

系统架构设计师教程 第一章 绪论 1.1 系统架构概述1.1.1 系统架构的定义及发展历程1.1.2 软件架构的常用分类及建模方法1.1.3 软件架构的应用场景1.1.4 软件架构的发展未来1.2 系统架构设计师概述1.2.1 架构设计师的定义、职责和任务1.2.2 架构设计师应具备的专业素质1.3 如何成…...

Vue + Element UI + JSEncrypt实现简单登录页面

安装依赖 npm install jsencrypt --save局部引入 import JSEncrypt from jsencrypt/bin/jsencrypt;登录页面index.vue <template><div class"loginbody"><div class"logindata"><div class"logintext"><h2>Wel…...

从“关注流”到“时间线”,搜狐给内容加信任价值

文 | 螳螂观察 作者 | 易不二 在近日第十六季搜狐新闻马拉松活动中&#xff0c;搜狐新闻APP的“时间线”功能备受瞩目。不仅开幕式现场竖了一块“左手时间线&#xff0c;右手关注流”的路牌&#xff0c;张朝阳也着重强调了“时间线”产品的互动方式&#xff1a;“关注是基础&…...

vscode的一些使用问题

vscode使用技巧 1、快捷键&#xff08;1&#xff09;打开命令面板&#xff08;2&#xff09;注释&#xff08;3&#xff09;删除行&#xff08;4&#xff09;上下移动光标&#xff08;5&#xff09;光标回退&#xff08;6&#xff09;复制行&#xff08;7&#xff09;插入空白行…...

爬虫-网页基础

HTML 基本语法 HTML&#xff1a;Hyper Text Markup Language, 超文本标记语言&#xff0c;是计算机语言的一种&#xff0c;由元素构成。 p元素 <p>Web 真好玩&#xff01;</p> 由三大部分组成 开始标签&#xff1a;一对尖括号中间包裹这元素名称元素内容&#x…...

保存huggingface缓存中AI模型(从本地加载AI模型数据)

在github下拉项目后,首次运行时会下拉一堆模型数据&#xff0c;默认是保存在缓存的&#xff0c;如果你的系统盘空间快满的时候就会被系统清理掉&#xff0c;每次运行又重新下拉一次&#xff0c;特别麻烦。 默认下载的缓存路径如下&#xff1a;C:\Users\用户名\.cache\huggingf…...

wps的xlsm和xltm和xlam格式的文件各有什么区别

文章目录 一、前言二、WPS表格文件格式介绍1. .xlsm 文件格式2. .xltm 文件格式3. .xlam 文件格式 三、总结 一、前言 本文将详细介绍WPS表格中三种常见的文件格式&#xff1a;.xlsm、.xltm、和.xlam&#xff0c;并提供通俗易懂的解释和示例&#xff0c;帮助用户理解它们的区别…...

软件性能测试有哪几种测试方法?专业性能测试报告出具

软件性能测试是指对软件系统在特定负载条件下的性能进行评估和验证的过程&#xff0c;目的是确保软件在正常使用的情况下能够满足用户的要求&#xff0c;并在稳定的性能水平下运行&#xff0c;在软件开发过程中起到了至关重要的作用&#xff0c;可以确保软件产品的质量和可靠性…...

JavaScript语言简介与实战应用:从零开始的编程之旅

JavaScript&#xff0c;一种轻量级的、解释型的、面向对象的脚本语言&#xff0c;自1995年由Netscape公司的Brendan Eich设计以来&#xff0c;迅速成为了Web开发中不可或缺的一部分。它不仅能够为静态网页添加动态效果&#xff0c;还能实现客户端与服务器的交互&#xff0c;如今…...

如何理解synchronized锁升级

在Java中&#xff0c;synchronized 关键字是实现线程同步的一种方式&#xff0c;它涉及到锁的升级和释放的过程。理解synchronized 锁的升级可以分为三个阶段&#xff1a;无锁状态、偏向锁状态和轻量级锁状态。 无锁状态&#xff1a; 当对象被创建时&#xff0c;默认处于无锁状…...

js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some

遍历方法返回值使用场景备注副作用for 循环——遍历数组通用可以改变原数组forEach 循环——遍历数组ES5 新增&#xff0c;不支持中断和异步可以改变原数组for of 循环——遍历数组ES6 新增可以改变原数组map格式化后的数组格式化数组的API不会改变原数组filter过滤后的数组过滤…...

Node.js开发实战 视频教程 下载

ode.js开发实战 视频教程 下载 下载地址 https://download.csdn.net/download/m0_67912929/89487510 01-课程介绍.mp4 02-内容综述.mp4 03-Node.js是什么? .mp4 04-Node.js可以用来做什么?.mp4 05-课程实战项目介绍.mp4 06-什么是技术预研? .mp4 07-Node.js开发环境…...

不伤身的酒是智商税?这款轻养新标杆打破偏见

1.当“喝酒伤身”成为共识&#xff0c;谁在挑战这个铁律&#xff1f;中国人喝酒的历史&#xff0c;几乎和文明史一样长。但“喝酒伤身”这四个字&#xff0c;也像影子一样&#xff0c;从未离开过酒桌。每一次举杯&#xff0c;耳边总有人念叨&#xff1a;“少喝点”“伤肝”“伤…...

二手交易平台信任度调查:闲鱼交易安全性深度解析

二手交易平台信任度调查&#xff1a;闲鱼交易安全性深度解析随着循环经济的兴起&#xff0c;中国二手交易市场规模在2023年突破万亿元大关。作为阿里巴巴旗下的C2C二手交易平台&#xff0c;闲鱼凭借5亿注册用户和日均10亿元的交易规模&#xff0c;已成为国内最大的闲置物品流转…...

一步步教你获取ADNI影像数据:从搜索到下载全流程解析

1. ADNI数据库简介与准备工作 ADNI&#xff08;Alzheimers Disease Neuroimaging Initiative&#xff09;是全球最权威的阿尔茨海默病研究数据库之一&#xff0c;包含了大量脑部影像数据和临床信息。第一次接触这个数据库的研究者可能会被复杂的界面和操作流程吓到&#xff0c;…...

PyTorch 2.8镜像部署教程:RTX 4090D配置htop实时监控GPU/CPU/内存使用

PyTorch 2.8镜像部署教程&#xff1a;RTX 4090D配置htop实时监控GPU/CPU/内存使用 1. 环境准备与快速部署 在开始之前&#xff0c;请确保您的硬件配置满足以下要求&#xff1a; 显卡&#xff1a;RTX 4090D 24GB显存内存&#xff1a;120GB及以上存储&#xff1a;系统盘50GB …...

基于博途1200PLC + HMI的交通灯控制系统仿真:打造灵活交通指挥中枢

基于博途1200PLCHMI交通灯/红绿灯控制系统仿真(时间可设置) 程序&#xff1a; 1、任务&#xff1a;PLC.人机界面控制交通灯 2、系统说明&#xff1a; 系统设有手动模式、自动模式、黄闪模式、红绿灯时间可设置、各灯可单独手动模式、故障模拟模式、数码管显示等模式运行 交通灯…...

3步掌握B站视频下载:解锁大会员4K高清内容

3步掌握B站视频下载&#xff1a;解锁大会员4K高清内容 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader Bilibili-downloader是你获取B站…...

软件实施交付转运维学习第三天:Linux系统命令基础(部分)

从实施到运维的蜕变之路&#xff0c;掌握命令就是掌握Linux的灵魂写在前面作为一名从软件实施交付转向运维的工程师&#xff0c;我深刻体会到&#xff1a;Linux命令不仅仅是简单的指令&#xff0c;更是与操作系统对话的语言。当我们站在实施和运维的交界处&#xff0c;掌握Linu…...

Docker 容器技术 第一节---定义、概念、安装CentOS 7 Linux系统、MobaXterm中安装docker-ce

一、Docker的定义Docker是一款开源的容器化平台&#xff0c;它能将应用及其依赖的环境、配置、库等打包成轻量可移植的容器&#xff0c;既保证了不同环境下应用运行的一致性&#xff0c;又以共享宿主机内核的方式实现了比传统虚拟机更高效的资源利用和秒级启动速度&#xff0c;…...

保姆级教程:在RK3588上交叉编译Qt 5.15.15(含完整配置流程)

保姆级教程&#xff1a;在RK3588上交叉编译Qt 5.15.15&#xff08;含完整配置流程&#xff09; 在嵌入式开发领域&#xff0c;RK3588作为一款高性能的ARM处理器&#xff0c;正逐渐成为智能终端设备的首选平台。而Qt框架凭借其跨平台特性和丰富的GUI组件&#xff0c;为嵌入式界面…...

TMAH显影液全场景应用:离子交换树脂在制备-使用-回收中的pH控制策略

为什么显影液的pH值如此重要&#xff1f;在芯片制造的精密世界里&#xff0c;光刻工艺就像是在头发丝上雕刻电路图案。而显影液&#xff0c;就是这场"雕刻"中的关键刻刀。目前主流的正性光刻胶显影液以四甲基氢氧化铵&#xff08;TMAH&#xff09;为主要成分&#xf…...