【jsonview去除排序】如何让jsonview不自动排序(已解决)

2023-12-21 19:04:44

??涉及知识

如何取消JSON默认数值排序,JSON.parse()函数排序关闭,取消JSON.parse排序,Json格式化校验,jsonview排序问题解决方法。


🥇专栏🥇:前端技术,json格式化
💂关于我💂:一个持续输出型博主,爱分享,喜技术,期待关注与交流!
??公众号??:《IT黄大大》更多技术分享抢先看;
👇皇榜专区👇:一键轻松上皇榜,皇榜特区享有私聊优先资源;


??写在前面

因为公司业务调整,所有配置文件得从库中读取,因此一些json文件的格式化展示校验工作落到我身上了,最近我特意花了两天时间搞一个自定义封装json格式化校验组件的事情,当时我是基于jquery的jsonview组件来做的,其实一开始我是自己写的,后面发现写树结构有点复杂,于是乎还是用组件去实现,省的麻烦了,在我快大功告成时候,发现我的json格式居然和我原有的顺序不匹配,我还以为组件的问题,捣鼓了一会儿才找到parse原因。
声明:原创于博主《IT黄大大》,更多资讯可关注微信公众号《IT黄大大》,如有转载请说明出处,创作不易

效果展示

我是比较喜欢注重效果说话的一个博主哈,如果这个效果图并不是你想要的就可以划走,希望能给大家寻找资料减少时间。
在这里插入图片描述

1、问题背景

文章头部我也写了一些关于我的问题源头,下面我先给大家看张图吧:
在这里插入图片描述
这个是我json格式化自己写的一个页面,不难发现我的key为info的值在输入框是最上面的,但是一格式化就变成在最下面去了,主要原因还是用了JSON.parse()这个函数,因为它默认会对数值类带有一个排序规则,针对字符和数值类的key进行了默认升序的操作。
你去网上看看很多在线json格式化工具,也都是将数组类的提前了,如下:
在这里插入图片描述
所以我想解决的是很多在线软件都没能解决的问题,哈哈哈哈哈,瞬间觉得自己好厉害!

2、解决方案

2.1 网上方案(不适配)

从第一节我们就可以知道哈,我们的需求是保持原有的顺序不变,其实要实现这个我们还得从key名本身入手,我们用的最多的是直接将json字符串放里面,当然网上还有人建议我对JSON.parse的函数第二个变量添加一个转化器,这个方式并不能解决我的数值类问题,因此我也就针对我的问题做了一个思路转化。

2.2 最终解决方案

因为其是对数值类的排序存在问题,最终我的目的是要在右侧展示出来,我统一对数值类的key添加一个特定的字符串(hdd),然后在渲染页面的时候将特定字符串去除掉。核心就是将所有的《“:》进行替换成特定字符串《hdd”:》,通过这种方式来达到统一替换的目的。
那么就有人会问,要是我的不是《“:》这种,而是《” :》,又或是《" :》这种多个空格在冒号前面呢?
针对上面的问题哈,我们就从下面三个步骤去做

A、去除冒号前空格

因为我也不知道有多少个空格,因此我们就用递归去做这件事情吧,如下递归函数。

function removeBlank(str){
    if(str.indexOf(" :")>-1){
        str = str.replace(/ :/g, ':');
        return removeBlank(str);
    }else{
        return str;
    }
};

只要调用一下jsonstr = removeBlank(jsonstr)即可。

B、正则表达式将所有key替换

【切记】在JSON.parse函数之前

json =  json.replace(/":/g, 'hdd":');

C、html渲染替换回来

在jsonview组件的JSONFormatter.prototype.objectToHTML方法体内添加如下所示代码:

if(key.indexOf("hdd")){
  key =  key.replace(/hdd/g, '');
}

这样的话把之前替换过的也就替换回来了。我们就可以继续格式化了,如下所示效果:
声明:原创于博主《IT黄大大》,更多资讯可关注微信公众号《IT黄大大》,如有转载请说明出处,创作不易

2.3 反斜杠问题

替换后我发现出现反斜杠的话就会存在另一个问题,也就是解析不出来,导致json错误,因此我又针对反斜杠进行了字符串的替换,当然这样能解决问题,大家如果有更好的想法,不妨留言一起讨论学习学习。
和上面的2.2类似,我们也用这种方式去做,替换完了再替换回来,担心国际友人不好理解,特意用了fanxiegang字符替换,如下所示:

A、正则表达式将所有替换

【切记】在JSON.parse函数之前

json =  json.replace(/\\"/g, 'fanxiegang');

B、html渲染替换回来

在jsonview组件的JSONFormatter.prototype.objectToHTML方法体内添加如下所示代码:

var spanStr = (this.valueToHTML(value, level + 1));
if(spanStr.indexOf("fanxiegang")>-1){
  spanStr = spanStr.replace(/fanxiegang/g, '\"');
}

到这里就基本告一段落了哈。

3、结果验证

这个地方主要也是对反斜杠支持,冒号前空格,数值类key键,格式化,收缩与展开等多个功能进行验证,具体效果如下:
在这里插入图片描述
从上图不难发现,真心可以,都已实现;

??作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!当然如果这个文章对您带来不好的体验还希望能多多包涵,一起学习进步。

【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业百套成品等! 「在公众号<IT黄大大>里也会定期分享一些免费好看的html页面,期待您的关注哈」!
声明:原创于博主《IT黄大大》,更多资讯可关注微信公众号《IT黄大大》,如有转载请说明出处,创作不易

2024年我们一起加油,一起成长,感谢您的支持与谅解!

文章来源:https://blog.csdn.net/hdp134793/article/details/135124841
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。