怎么制作一个在线json格式化工具?

阳光 2021-01-20 21:15:36 java常见问答 5160

在日常开发中,我们经常需要和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工具网。

推荐阅读:

怎么考java架构师?考java架构师技巧

java二叉树怎么转成数组?java怎么实现二叉树?

java入门知识点有哪些?java入门知识点分享