自己做了一个json格式化工具,亲测可以使用
2016-08-11 16:33
447 查看
随笔背景:在向后台请求数据之后,我们常常会拿到一串json格式.此时,为了方便查看key-value,程序猿们常常使用一些在线json格式化工具或者是类似于notepadd++这样的工具进行转换.今天笔者捋了捋思路,自己写了一个格式化json数据的小插件.记录于此.
1.在页面上部署一个空白的div,可以向里面输入json数据,方便转化.
html代码如下:
注意:设置div的contenteditable属性值为true,可以让一个div变的可编辑.(之前我一直以为只有input家族或者是textarea才能编辑....)
页面的截图如下:
2.接下来是通过js代码遍历json对象,实现格式化.
我的思路是:json对象无疑就是键值对(key-value),我们可以先遍历json对象的每个属性(key),判断属性值(value)的类型,如果是一个object,采用一个方法处理,如果是一个非object,则直接展示,我们姑且把上述方法定义为moreInfo,如果遍历到一个value的类型是Array(数组),那么我们再递归,继续循环调用moreInfo方法,直到把每一个最小单位的键值对取出来.
那么我们怎么让每一个键值对处于一个单行呢?这里我使用的是<p>标签,将key-value包裹在<p>标签即可.递归这一块儿,说起来挺绕的,需要把思路理清,考虑到每一种情况,再进行对应的操作.
说了我的思路,接下来是js代码部分:
上述代码中:newEle是我们最终要展示的格式化后的json数据结构,设置按钮的点击事件,一次进行判断处理.
接下来是比较关键的函数moreInfo了:
tips:虽然javascript的原生对象中,没有Array这种,也就是通过typeof()无法的到一个Array,即使是typeof(["1","2"]),返回的也是object.但是通过obj instanceof Array可以判断对象是否为数组类型.
3.最终的效果如下图:
内容太多就不一一截图了.
总结:最开始我在公司写了大概40分钟左右,但是在进入到moreInfo这个函数之后,始终无法将第二层的json对象中的键值对取出来,回家理清思路之后,解决了.原因有二:
1.第二层的对象有几个是数组,对于数组这块之前没有做处理,数组的元素可能是对象,也可能只是一个string,而对象的内部有可能还有对象以及string.....,如此递归循环
2.在调用moreInfo函数时,我最开始是将newEle作为一个参数传递进去的,通过return的方法,再返回出去.但实际上失败了,回家理清思路之后,就好了:
应该是在moreInfo函数内部再次调用moreInfo时,ele没有传递出去,导致newEle没有发生变化.
当然这个小插件还是有瑕疵的,比如说在对于对象结尾的那个逗号进行判断时,还需要优化.
ps:今天我觉得讲解的够详细了额,博客园审核的小编们,你们再将我的博客移出博客园首页的话,就说不过去了吧~ 0 0
1.在页面上部署一个空白的div,可以向里面输入json数据,方便转化.
html代码如下:
<div class="flexBox"> <div id="data2" contenteditable="true" style="height: 600px;flex: 8;overflow-y: scroll"></div> <button style="flex: 1" id="jsonFormat2">JSON格式化</button> </div>
注意:设置div的contenteditable属性值为true,可以让一个div变的可编辑.(之前我一直以为只有input家族或者是textarea才能编辑....)
页面的截图如下:
2.接下来是通过js代码遍历json对象,实现格式化.
我的思路是:json对象无疑就是键值对(key-value),我们可以先遍历json对象的每个属性(key),判断属性值(value)的类型,如果是一个object,采用一个方法处理,如果是一个非object,则直接展示,我们姑且把上述方法定义为moreInfo,如果遍历到一个value的类型是Array(数组),那么我们再递归,继续循环调用moreInfo方法,直到把每一个最小单位的键值对取出来.
那么我们怎么让每一个键值对处于一个单行呢?这里我使用的是<p>标签,将key-value包裹在<p>标签即可.递归这一块儿,说起来挺绕的,需要把思路理清,考虑到每一种情况,再进行对应的操作.
说了我的思路,接下来是js代码部分:
var newEle=''; $('#jsonFormat2').on('click', function () { var resData2=JSON.parse($('#data2').text()); $('#data2').html(''); newEle=''; for(var item in resData2){ if(typeof(resData2[item])!='object' || resData2[item]==null){ newEle+='<p><span class="title">'+item+'</span>: '+resData2[item]+',</p>'; }else{ moreInfo(resData2[item],item); } } $('#data2').html(newEle); })
上述代码中:newEle是我们最终要展示的格式化后的json数据结构,设置按钮的点击事件,一次进行判断处理.
接下来是比较关键的函数moreInfo了:
function moreInfo(obj,item){ if(obj instanceof Array){ newEle+='<p><span class="title">'+item+':['+'</span>'+'</p>'; for(var i=0;i<obj.length;i++){ if(typeof(obj[i])!='object'){ newEle+='<p><span class="title">'+obj[i]+',</span></p>'; }else{ moreInfo(obj[i],'') } } newEle+='<p><span class="title">'+']'+'</span>'+',</p>'; }else if(typeof(obj)=='object' && !(obj instanceof Array)){ newEle+='<p><span class="title">'+item+'{'+'</span>'+'</p>'; for(var item in obj){ if(typeof(obj[item])!='object' || obj[item]==null){ newEle+='<p><span class="title">'+item+'</span>: '+obj[item]+',</p>'; }else{ moreInfo(obj[item],item) } } newEle+='<p><span class="title">'+'},'+'</span>'+'</p>'; }else{ newEle+='<p><span class="title">'+obj+'</span>'+',</p>'; } }
tips:虽然javascript的原生对象中,没有Array这种,也就是通过typeof()无法的到一个Array,即使是typeof(["1","2"]),返回的也是object.但是通过obj instanceof Array可以判断对象是否为数组类型.
3.最终的效果如下图:
内容太多就不一一截图了.
总结:最开始我在公司写了大概40分钟左右,但是在进入到moreInfo这个函数之后,始终无法将第二层的json对象中的键值对取出来,回家理清思路之后,解决了.原因有二:
1.第二层的对象有几个是数组,对于数组这块之前没有做处理,数组的元素可能是对象,也可能只是一个string,而对象的内部有可能还有对象以及string.....,如此递归循环
2.在调用moreInfo函数时,我最开始是将newEle作为一个参数传递进去的,通过return的方法,再返回出去.但实际上失败了,回家理清思路之后,就好了:
function moreInfo(obj,item,ele){ if(obj instanceof Array){ ele+='<p><span class="title">'+item+':['+'</span>'+'</p>'; for(var i=0;i<obj.length;i++){ if(typeof(obj[i])!='object'){ ele+='<p><span class="title">'+obj[i]+',</span></p>'; }else{ moreInfo(obj[i],'') } } ele+='<p><span class="title">'+']'+'</span>'+',</p>'; }else if(typeof(obj)=='object' && !(obj instanceof Array)){ ele+='<p><span class="title">'+item+'{'+'</span>'+'</p>'; for(var item in obj){ if(typeof(obj[item])!='object' || obj[item]==null){ ele+='<p><span class="title">'+item+'</span>: '+obj[item]+',</p>'; }else{ moreInfo(obj[item],item) } } ele+='<p><span class="title">'+'},'+'</span>'+'</p>'; }else{ ele+='<p><span class="title">'+obj+'</span>'+',</p>'; } }
应该是在moreInfo函数内部再次调用moreInfo时,ele没有传递出去,导致newEle没有发生变化.
当然这个小插件还是有瑕疵的,比如说在对于对象结尾的那个逗号进行判断时,还需要优化.
ps:今天我觉得讲解的够详细了额,博客园审核的小编们,你们再将我的博客移出博客园首页的话,就说不过去了吧~ 0 0
相关文章推荐
- 有强迫症的我只能自己写一个json格式化工具
- NET简单的一个画图程序 使用简单 自己可以相关自己的内容进行配置就可以使用了
- 分享一个自己写的字符串工具:字符串格式化拼接
- 段很长的道路,一个油漆工刷路面,他有两种工具,工具1每次可以刷1米,工具2每次可以刷3米,1)问当道路长度是n米时,使用工具1和工具2配合使用刷完全部道路,共有多少种方式?
- 久违的json使用大法 (通常Ajax希望返回多个键值对,可以用将要返回的数据先封装到一个对象中,再将这个对象转为json格式)
- 一个自己用的代码备份工具,支持delphi,android,java,可以自己添加配置,灵活支持大部分编程语言
- 共享一个免费文件管理程序,可以嵌入你自己的网站中使用!
- 自己开发的一个非常粗糙的HTML格式化工具
- 使用tomcat+nat123在自己电脑上发布一个外网可以访问的网站
- 一个墙纸还可以改变使用裁剪工具改变图像
- 一个FLASH开发的数据统计工具 PHP可以使用
- writeObject可以写n个,但是readObject()却只能读一次,你做一下测试。 如果你需要序列化好几个类的话,建议你用json;或者自己写两个方法,一个是将对象转换为字符串,一个是将字符串
- NET简单的一个画图程序 使用简单 自己可以相关自己的内容进行配置就可以使用了
- 收藏的一个在线json格式化验证工具
- 使用自己电脑搭建一个外网可以访问的服务器tomcat
- wap获取手机号码,今天uc开启云加速,用公司的工具类获取是null,但是另外一个项目可以,应该这个项目的工具旧少了一些代码。。,网上找了 方法自己加可以
- 事件代理总结: 已经有一些使用主流类库的事件代理示例出现了,比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子,比如说Usable Type blog上的这一个。一旦需要的话,事件代理将是你工具箱里的一件得心应手的工具,而且它很容易实现。
- 分享一个强大的工具,可以快速查看自己公司网站或竞争对手网站的CDN情况
- Tiled2Unity —— 一个让Unity3D可以使用Tiled地图编辑器导出数据和素材的工具