By 被删

更新日期:

文章目录
  1. 1. 分析json格式化样式
    1. 1.1. json样式/颜色
    2. 1.2. js判断数据类型
  2. 2. 实现逻辑
    1. 2.1. 字符串匹配
    2. 2.2. 结束语

最近项目需要用到将json格式化展示在html页面中，在这里简答整理一下其中逻辑实现，将json转换为对象Object然后判断数据类型进行处理。

分析json格式化样式

这里我们先分析一下json格式化后的展示方式，例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "type": "type1",
    "total": 111,
    "data": [{
        "time": "2016-10-10 22:22:22",
        "flag": null,
        "appear": {
            "head": "head",
            "list": ["123","123","123"]
        }
    }, {
        "time": "2016-10-10 22:22:22",
        "flag": true,
        "appear": {
            "head": "head",
            "list": ["123","123","123","123","123"]
        }
    }]
}

json样式/颜色

为了使得展示的体验增加，我们可以根据不同的数据类型设置不同的颜色展示。

  • 基本符号，{}、[]、:、""、,
  • 字符串
    • key键值
    • value值
  • 数字
  • true/false/null

js判断数据类型

下面我们通过js来判断数据类型。

  • Object对象
    • typeof value === 'object'
    • 在javascript中，null也会被判断为object，所以我们可以添加个条件
    • 即value && typeof value === 'object'
    • 这里数组Array也会被判断为object，下面我们讲一下数组的判断
  • Array数组
    • 我们可以使用consturctor来判断数组
    • value.constructor === Array
    • Object.prototype.toString.call(value) === '[object Array]'
    • 后一种是公认的靠谱解法，具体下来大家自己思考哈
  • String字符串
    • typeof value === 'string'
  • Number数字
    • typeof value === 'number'
  • Null
    • value === null
  • Boolen
    • typeof value === 'boolen'

实现逻辑

通过上述json分析，我们可以使用两种方式实现json格式化：

  • 分析JSON.stringify()后的字符串，使用正则把需要的格式匹配替换
  • 将json转化为object，然后通过js判断数据类型进行格式化

这里我们使用第二种方法实现。
第一种实现可以参考上一篇《将json输出为html(一)：字符串正则匹配》。

字符串匹配

  • 判断数据类型并进行处理

    • 对象Object，将处理为{<span class="key">"key"</span>:value}，并进入检测递归
    • 数组Array，将处理为[value,value]，并将进入检测递归
    • true/false/null，将处理为<span class="boolen/null">true/false/null</span>
    • 字符串，将处理为<span class="string">"string"</span>
    • 数字Number，将处理为<span class="number">1</span>

  • 实现
    这里将上述的逻辑进行实现。

  • 数组不换行实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function ObjectToHtml(data) {
    // 若传入数值为json，则转换为字符串
    var txt = typeof data === 'string' ? data : JSON.stringify(data);
    // 转换为Object
    try {
        var obj = eval('(' + txt + ')');
    } catch (e) {
        alert('数据源语法错误,JSON格式化失败! 错误信息: ' + e.description, 'err');
        return
    }
    var line = '</br>', // 换行
        indentChar = '&nbsp;&nbsp;&nbsp;&nbsp;'; // 缩进量
    // 获取缩进字符
    var getTab = function(num) {
        for (var i = 0, tab = ''; i < num; i++) {
            tab += indentChar;
        }
        return tab;
    };
    // 检测递归
    var format = function(value, indent /*缩进*/ , isLast /*是否数组或者对象最后*/ , inArray /*是否在数组中*/ ) {
        var str = '';
        // 将处理为`[value,value]`，并将进入检测递归
        if (Object.prototype.toString.call(value) === '[object Array]') {
            str += '[';
            value.forEach(function(item, index) {
                str += format(item, indent, index === (value.length - 1), true);
            });
            str += ']';
        // null，将处理为`<span class="null">null</span>`
        } else if (value === null) {
            str += '<span class="null">null</span>';
        // 对象Object，将处理为`{<span class="key">"key"</span>:value}`，并进入检测递归
        } else if (typeof value === 'object') {
            str += '{' + line + getTab(++indent);
            var keys = Object.keys(value);
            keys.forEach(function(key, index) {
                str += '<span class="key">' + key + '</span>: ' + format(value[key], indent, index === (keys.length - 1));
            });
            str += '}';
            indent--;
        // true/false，将处理为`<span class="boolen">true/false</span>`
        } else if (typeof value === 'boolean') {
            str += '<span class="boolean">' + value + '</span>';
        // 字符串，将处理为`<span class="string">"string"</span>`
        } else if (typeof value === 'string') {
            str += '<span class="string">' + value + '</span>';
        // 数字Number，将处理为`<span class="number">1</span>`
        } else {
            str += '<span class="number">' + value + '</span>';
        }
        str += (isLast ? '' : ',') + (inArray ? '' : (line + getTab(isLast ? --indent : indent)));
        return str;
    }
    return ('<div class="json">' + format(obj, 0, true) + '</div>');
}
  • 数组换行实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
function ObjectToHtml(data) {
    // 若传入数值为json，则转换为字符串
    var txt = typeof data === 'string' ? data : JSON.stringify(data);
    // 转换为Object
    try {
        var obj = eval('(' + txt + ')');
    } catch (e) {
        alert('数据源语法错误,JSON格式化失败! 错误信息: ' + e.description, 'err');
        return
    }
    var line = '</br>', // 换行
        indentChar = '&nbsp;&nbsp;&nbsp;&nbsp;'; // 缩进量
    // 判断是否为对象
    var isObject = function(item) {
        return item && typeof item === 'object' && Object.prototype.toString.call(item) !== '[object Array]';
    };
    var getTab = function(num) {
        for (var i = 0, tab = ''; i < num; i++) {
            tab += indentChar;
        }
        return tab;
    };
    // 检测递归
    var format = function(value, indent, isLast, inArray) {
        var str = '';
        // [
        //   value,
        //   value
        // ]，并将进入检测递归
        if (Object.prototype.toString.call(value) === '[object Array]') {
            str += '[' + (isObject(value[0]) ? '' : (line + getTab(++indent)));
            value.forEach(function(item, index) {
                str += format(item, indent, index === (value.length - 1), true);
                // 若不为对象，则进行换行
                str += isObject(item) ? '' : (line + getTab((index === (value.length - 1)) ? --indent : indent));
            });
            str += ']';
        // null，将处理为`<span class="null">null</span>`
        } else if (value === null) {
            str += '<span class="null">null</span>';
        // 对象Object，将处理为`{<span class="key">"key"</span>:value}`，并进入检测递归    
        } else if (typeof value === 'object') {
            str += '{' + line + getTab(++indent);
            var keys = Object.keys(value);
            keys.forEach(function(key, index) {
                str += '<span class="key">"' + key + '"</span>: ' + format(value[key], indent, index === (keys.length - 1));
            });
            str += '}';
            indent--;
        // true/false，将处理为`<span class="boolen/null">true/false</span>`
        } else if (typeof value === 'boolean') {
            str += '<span class="boolean">' + value + '</span>';
        // 字符串，将处理为`<span class="string">"string"</span>`
        } else if (typeof value === 'string') {
            str += '<span class="string">"' + value + '"</span>';
        // 数字Number，将处理为`<span class="number">1</span>`
        } else {
            str += '<span class="number">' + value + '</span>';
        }
        str += (isLast ? '' : ',') + (inArray ? '' : (line + getTab(isLast ? --indent : indent)));
        return str;
    }
    return ('<div class="json">' + format(obj, 0, true) + '</div>');
}

结束语

这里我们讨论了js判断数据类型并进行转换的实现方法。
此处查看项目代码
此处点击查看页面

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难，写文不易，给我家猪囤点猫粮了喵~

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 分析json格式化样式
    1. 1.1. json样式/颜色
    2. 1.2. js判断数据类型
  2. 2. 实现逻辑
    1. 2.1. 字符串匹配
    2. 2.2. 结束语