可能重复:
JSON pretty print using JavaScript
我希望像JSONview一样在HTML页上显示我的原始JSON数据。例如,我的原始json数据是:
{
"hey":"guy",
"anumber":243,
"anobject":{
"whoa":"nuts",
"anarray":[
1,
2,
"thr<h1>ee"
],
"more":"stuff"
},
"awesome":true,
"bogus":false,
"meaning":null,
"japanese":"明日がある。",
"link":"http://jsonview.com",
"notLink":"http://jsonview.com is great"
}
它来自http://jsonview.com/,如果你使用Chrome并安装了JSONView插件,我想要实现的是类似于http://jsonview.com/example.json。
我试过了,但没能理解它的工作原理。我想使用JS脚本(CSS突出显示)来定制我的原始JSON数据的格式,这些数据由ajax检索,最后将其放在HTML页面上的任何位置,比如放入div元素。有没有现有的JS库可以做到这一点?或者怎么做?
发布于 2013-01-07 22:33:21
我认为在超文本标记语言页面上显示数据所需要的就是JSON.stringify
。
例如,如果您的JSON存储如下:
var jsonVar = {
text: "example",
number: 1
};
然后,您只需执行此操作即可将其转换为字符串:
var jsonStr = JSON.stringify(jsonVar);
然后,您可以直接插入到HTML中,例如:
document.body.innerHTML = jsonStr;
当然,您可能希望通过getElementById
将body
替换为其他元素。
至于问题的CSS部分,您可以在将字符串对象放入DOM之前使用RegExp来操作它。例如,这段代码(also on JSFiddle for demonstration purposes)应该注意大括号的缩进。
var jsonVar = {
text: "example",
number: 1,
obj: {
"more text": "another example"
},
obj2: {
"yet more text": "yet another example"
}
}, // THE RAW OBJECT
jsonStr = JSON.stringify(jsonVar), // THE OBJECT STRINGIFIED
regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
f = {
brace: 0
}; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
// IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)
regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
},
rtnStr = 0;
if (p1.lastIndexOf('{') === (p1.length - 1)) {
rtnStr = rtnFn();
f['brace'] += 1;
} else if (p1.indexOf('}') === 0) {
f['brace'] -= 1;
rtnStr = rtnFn();
} else {
rtnStr = rtnFn();
}
return rtnStr;
});
document.body.innerHTML += regeStr; // appends the result to the body of the HTML document
这段代码只是在字符串中查找对象的各个部分,并将它们分离到div中(不过您可以更改其中的HTML部分)。但是,每次遇到大括号时,它都会根据是左大括号还是右大括号来递增或递减缩进(行为类似于the argument of 'JSON.stringify')。但您可以将此作为不同类型格式的基础。
发布于 2013-01-07 20:08:52
请注意,您提供的链接不是HTML页面,而是JSON文档。格式化由浏览器完成。
你必须决定是否:
的HTML页面
如果需要1.,只需告诉应用程序使用JSON呈现响应正文,设置MIME类型( application /json)等。在这种情况下,格式化由浏览器(和/或浏览器插件)处理。
如果是2.,则只需使用JSON呈现一个简单的最小HTML页面,您可以通过几种方式突出显示它:
如果您提供了更多关于堆栈的详细信息,那么提供示例或资源就会更容易。
编辑:例如,对于客户端JS突出显示,您可以尝试higlight.js。
https://stackoverflow.com/questions/14195530
复制相似问题