使用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);}