如何在HTML页面上显示原始JSON数据
可能重复：
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库可以做到这一点？或者怎么做？
回答 3
Stack Overflow用户
发布于 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')。但您可以将此作为不同类型格式的基础。
Stack Overflow用户
发布于 2013-01-07 20:08:52
请注意，您提供的链接不是HTML页面，而是JSON文档。格式化由浏览器完成。
你必须决定是否：
- 您希望显示原始JSON (而不是HTML页面)，如示例
- 所示显示带有格式化JSON
的HTML页面
如果需要1.，只需告诉应用程序使用JSON呈现响应正文，设置MIME类型( application /json)等。在这种情况下，格式化由浏览器(和/或浏览器插件)处理。
如果是2.，则只需使用JSON呈现一个简单的最小HTML页面，您可以通过几种方式突出显示它：
- 服务器端，具体取决于您的堆栈。几乎每个language
- client-side都有使用Javascript亮点库的解决方案。
如果您提供了更多关于堆栈的详细信息，那么提供示例或资源就会更容易。
编辑:例如，对于客户端JS突出显示，您可以尝试higlight.js。
https://stackoverflow.com/questions/14195530
复制相似问题