如何在HTML页面上显示原始JSON数据
可能重复：
使用JavaScript的JSON漂亮打印
我想像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突出显示）来自定义格式化由AJAX检索的原始JSON数据，并最终将它放在HTML页面中的任何位置，比如div元素。 有没有现成的JS库可以实现这一点？ 或者如何去做？
我认为你需要在HTML页面上显示数据的所有内容都是JSON.stringify 。
例如，如果你的JSON是这样存储的：
var jsonVar = {
text: "example",
number: 1
};
那么你只需要做到这一点，将其转换为字符串：
var jsonStr = JSON.stringify(jsonVar);
然后你可以直接插入你的HTML，例如：
document.body.innerHTML = jsonStr;
当然，你可能会想更换body通过一些其他元素getElementById 。
至于你的问题的CSS部分，你可以使用RegExp操纵字符串化的对象，然后再将它放入DOM。 例如，为了演示目的，这个代码（也在JSFiddle上）应该关注大括号的缩进。
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部分）。 但是，每次遇到大括号时，都会根据它是一个开始大括号还是一个关闭（与“JSON.stringify”的空间参数类似的行为）来递增或递减缩进。 但是，您可以将其作为不同类型格式的基础。
请注意，您提供的链接不是HTML页面，而是JSON文档。 格式化由浏览器完成。
您必须决定是否：
如果你想要1.，只要告诉你的应用程序使用JSON来呈现响应体，设置MIME类型（application / json）等。在这种情况下，格式化由浏览器（和/或浏览器插件）
如果是2.，则需要使用JSON呈现简单的最小HTML页面，您可以通过几种方式突出显示它：
如果您提供有关堆栈的更多详细信息，则可以更容易地提供示例或资源。
编辑：对于突出显示的客户端JS，您可以尝试higlight.js，例如。
除了<script>标签之外的任何HTML标签中的JSON都只是一个纯文本。 因此，就像你为你的HTML页面添加一个故事。
但是，关于格式化，这是另一回事。 我想你应该改变你的问题的标题。
看看这个问题。 另见本页。
链接地址: http://www.djcxy.com/p/8441.html