在研究yahoo音乐API,发现他的数据传出你可以任选xml和json,这是相当酷的事,于是写了个小例子来调用。因为读回来的歌曲数目通常会很多,于是想把json数据直接显示在页面上,想了想,貌似没有直接的方法,结果网上发现有一个比较好的实现,全文转载,原文地址
函数的主要功能是:传入一个Json对象(为了节省空间,一般请求返回的Json都是没有格式化的,可读性不好),可以输出格式化字符串,提高Json可读性。
虽然很多IDE或工具已经实现,但有时做简单测试时,格式化还是需要的。
假设,JS调用(假设界面有一个id为result的textarea)
var json = { Id: 1, Name: "Test", Date: new Date(), Subjects: [ { Name: "语文" }, { Name: "数学" }, { Name: "英语", Marks: [90, 100, 83, { Test: "aaa"}] } ], Company: { Name: "Microsoft", Location: "USA" }, Test: null }; //-------------测试 //格式化Json字符串 document.getElementById("result").value = JsonUti.convertToString(json);
界面输出
实现代码如下:
var JsonUti = { //定义换行符 n: "\n", //定义制表符 t: "\t", //转换String convertToString: function(obj) { return JsonUti.__writeObj(obj, 1); }, //写对象 __writeObj: function(obj //对象 , level //层次(基数为1) , isInArray) { //此对象是否在一个集合内 //如果为空,直接输出null if (obj == null) { return "null"; } //为普通类型,直接输出值 if (obj.constructor == Number || obj.constructor == Date || obj.constructor == String || obj.constructor == Boolean) { var v = obj.toString(); var tab = isInArray ? JsonUti.__repeatStr(JsonUti.t, level - 1) : ""; if (obj.constructor == String || obj.constructor == Date) { //时间格式化只是单纯输出字符串,而不是Date对象 return tab + ("\"" + v + "\""); } else if (obj.constructor == Boolean) { return tab + v.toLowerCase(); } else { return tab + (v); } } //写Json对象,缓存字符串 var currentObjStrings = []; //遍历属性 for (var name in obj) { var temp = []; //格式化Tab var paddingTab = JsonUti.__repeatStr(JsonUti.t, level); temp.push(paddingTab); //写出属性名 temp.push(name + " : "); var val = obj[name]; if (val == null) { temp.push("null"); } else { var c = val.constructor; if (c == Array) { //如果为集合,循环内部对象 temp.push(JsonUti.n + paddingTab + "[" + JsonUti.n); var levelUp = level + 2; //层级+2 var tempArrValue = []; //集合元素相关字符串缓存片段 for (var i = 0; i < val.length; i++) { //递归写对象 tempArrValue.push(JsonUti.__writeObj(val[i], levelUp, true)); } temp.push(tempArrValue.join("," + JsonUti.n)); temp.push(JsonUti.n + paddingTab + "]"); } else if (c == Function) { temp.push("[Function]"); } else { //递归写对象 temp.push(JsonUti.__writeObj(val, level + 1)); } } //加入当前对象“属性”字符串 currentObjStrings.push(temp.join("")); } return (level > 1 && !isInArray ? JsonUti.n : "") //如果Json对象是内部,就要换行格式化 + JsonUti.__repeatStr(JsonUti.t, level - 1) + "{" + JsonUti.n //加层次Tab格式化 + currentObjStrings.join("," + JsonUti.n) //串联所有属性值 + JsonUti.n + JsonUti.__repeatStr(JsonUti.t, level - 1) + "}"; //封闭对象 }, __isArray: function(obj) { if (obj) { return obj.constructor == Array; } return false; }, __repeatStr: function(str, times) { var newStr = []; if (times > 0) { for (var i = 0; i < times; i++) { newStr.push(str); } } return newStr.join(""); } };