在日常开发中，我们经常需要和json打交道。对于一些压缩的json，看起来非常不直观。这是我们就会借助一些在线的json格式化工具对json数据进行格式化。那么怎么制作一个在线json格式化工具?今天我们就来教大家方法。
首先创建一个div，用于输入要格式化的json数据。用textarea也可以，具体大家自己选择。代码如下：
<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变的可编辑。
回到json的特性，我们知道json就是一堆键值对的数据。我们可以先遍历json对象的每个属性(key),判断属性值(value)的类型,如果是一个object,采用一个方法处理,如果是一个非object,则直接展示,我们姑且把上述方法定义为moreInfo,如果遍历到一个value的类型是Array(数组),那么我们再递归,继续循环调用moreInfo方法,直到把每一个最小单位的键值对取出来.
说白了就是对json数据进行转换，转换成一个treemap结构，再输出出来即可。用到的无非就是递归，循环，和一些逻辑判断。
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 += '
'+item+': '+resData2[item]+'
, ';
}
else
{
moreInfo(resData2[item], item);
}
}
$('#data2')
.html(newEle);
});
function moreInfo(obj, item)
{
if (obj instanceof Array)
{
newEle += '
'+item+': ['+'
'+'
';
for (var i = 0; i < obj.length; i++)
{
< p = "" >
if (typeof (obj[i]) != 'object')
{
newEle += '
'+obj[i]+'
, ';
}
else
{
moreInfo(obj[i], '')
}
}
newEle += '
'+']
'+'
'+'
, ';
}
else if (typeof (obj) == 'object' && !(obj instanceof Array))
{
newEle += '
'+item+'
{
'+'
'+'
';
for (var item in obj)
{
if (typeof (obj[item]) != 'object' || obj[item] == null)
{
newEle += '
'+item+': '+obj[item]+'
, ';
}
else
{
moreInfo(obj[item], item)
}
}
newEle += '
'+'
}, '+'
'+'
';
}
else
{
newEle += '
'+obj+'
'+'
, ';
}
}JSON有哪两种结构?
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。 经过对象、数组2种结构就可以组合成复杂的数据结构了。
这就是在线json格式化工具制作的相关方法，作为java人员如果不会的话可以参考以上内容，就当是给自己积累实战经验哦!最后大家如果想要了解更多java实例知识，敬请关注奇Q工具网。
推荐阅读：