使用Javascript打印JSON数据

使用Javascript打印JSON数据

转发请标明原文链接：http://www.cnblogs.com/misuoka/p/4081750.html

废话不扯，直入主题。

一般来说，Chrome和Firefox两款浏览器已提供我们强大的调试功能，可以在网络请求选项中查看Ajax请求页返回的JSON数据。但如果数据较为复杂，就不易于观看。

例如：

1.Chrome中的情况:

2.Firefox中的情况：

所以，我们可以编写一个函数来把JSON对象以友好的格式打印到HTML页面中，以便观看。

效果如下：

实现代码：

/** 输出空格函数 */
function blank(num) {
    var res = '';
    for (var i = 0; i < num; i++) {
        res += ' ';
    }
    return res;
}   

/** 计算JSON对象数据个数 */
function jsonLen(jsonObj) {
    var length = 0;
    for (var item in jsonObj) {
      	length++;
    }
    return length;
}

/** 解析JSON对象函数 */
function printObj(obj) {
    // JSON对象层级深度
    deep = (typeof(deep)=='undefined') ? 0: deep;
    var html = "Array\n"; // 返回的HTML
    html += kong(deep) + "(\n";
    var i = 0; 
    // JSON对象，不能使用.length获取数据的个数，故需自定义一个计算函数
    var len = typeof(obj) == 'array' ? obj.length : jsonLen(obj);
    for(var key in obj){
        // 判断数据类型，如果是数组或对象，则进行递归
        // 判断object类型时，&&jsonLen(obj[key])是由于
        // 1、值（类似：email:）为null的时候，typeof(obj[key])会把这个key当做object类型
        // 2、值为null的来源是，数据库表中某些字段没有数据，查询之后直接转为JSON返回过来
        if(typeof(obj[key])=='array'|| (typeof(obj[key])=='object' && jsonLen(obj[key]) > 0) ){
            deep += 3;
            html += kong(deep) + '[' + key + '] => ';
            // 递归调用本函数
            html += printObj(obj[key],deep);
            deep -= 3;
        }else{
            html += kong(deep + 3) + '[' + key + '] => ' + obj[key] + '\n';
        }
        if (i == len -1) {
            html += kong(deep) + ")\n";
        };
        i++;
    }
    return html;
}

/** 向HTML页面追加打印JSON数据 */
function p_Obj(obj) {
    var div = document.getElementById('print-json-html');
    if (div != null) {
        document.body.removeChild(div);
    };
    var node = document.createElement("div");//创建一个div标签 
    node.id = 'print-json-html';
    node.innerHTML = '<pre>' + printObj(obj) + '</pre>';
    document.body.appendChild(node);
}