当前位置:网站首页 > Vue.js开发 > 正文

map转json不改变顺序(map转为json对象)



一般情况下,一个下拉框里的options是后端返回的,有的时候后端返回的是一个数组,有的时候返回的却是一个对象,具体看后端怎么实现。

如果返回的是对象的话,我们需要将对象转换为数组,来进行循环,这时候就出现问题了😭。

假如后端返回如下数据,是正常的。

 
  

由于这个对象是后端维护的,这个对象的key可能会增加一个,例如

 
  

这个时候我们的下拉框就会展示成这个顺序

产品说想把放在最后

首先我们思考下为什么会出现这种情况呢?

image.png

当js解析json作为js对象时,会按照自己的规则对key进行排序:

如果key是整数(如:123)或者整数类型的字符串(如:“123”),那么会按照从小到大的排序。除此之外,其它数据类型,都安装对象key的实际创建顺序排序。

image.png

那怎么办呢?

我尝试了下Map, 发现Map可以保证顺序。

那么思路可以是这样:

  1. 获取到未被转换的响应数据

我们知道, 是基于 的,我们收到的响应数据不是直接就是json,需要我们通过解析

  1. 使用自定义的json解析方法

如果我们使用JSON.parse解析,就又会被解析成js对象。所以这里我们自己实现JSON.parse,返回一个Map保证顺序

完整解析json的代码,返回的是个map

 
  

由于axios默认返回的是json格式,所以我们需要简单的配置

 
  

需要保证顺序序的接口就可以用

 
  

需要保证有序的数据还是以数组的形式返回,这种方式只用于临时解决问题,😄。

到此这篇map转json不改变顺序(map转为json对象)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • ubuntu 内核源码(ubuntu20.04内核编译)2025-12-07 23:18:05
  • vue2和vue3区别v-if v-for(vue2和vue3区别大吗)2025-12-07 23:18:05
  • vue 官网(personvue官网)2025-12-07 23:18:05
  • redhat6.5重置root密码(redhat默认root密码)2025-12-07 23:18:05
  • vue路由守卫作用(vue 路由守卫作用)2025-12-07 23:18:05
  • vue2和vue3区别(vue2和vue3区别大吗)2025-12-07 23:18:05
  • pcie5.0的显卡有哪些(pcie 5.0 显卡)2025-12-07 23:18:05
  • can通讯线故障(can通讯故障522083.19)2025-12-07 23:18:05
  • vue2和vue3区别大吗(vue3和vue2的优缺点)2025-12-07 23:18:05
  • 卡巴斯基7.0激活码(2019卡巴斯基永久激活码)2025-12-07 23:18:05
  • 全屏图片