将 JSON 显示为 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/883977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display JSON as HTML
提问by John Muchow
Any recommendations on how to embed JSON in an HTML page with the JSON formatted in a human readable style? For example, when you view XML in a browser, most browsers display the XML formatted (indented, proper line breaks, etc). I'd like the same end result for JSON.
关于如何将 JSON 嵌入到 HTML 页面中，JSON 格式为人类可读样式的任何建议？例如，当您在浏览器中查看 XML 时，大多数浏览器会显示 XML 格式（缩进、正确的换行等）。我想要 JSON 相同的最终结果。
Color syntax highlighting would be a bonus.
颜色语法突出显示将是一个奖励。
Thanks
谢谢
回答by John
You can use the JSON.stringify function with unformatted JSON. It outputs it in a formatted way.
您可以对未格式化的 JSON 使用 JSON.stringify 函数。它以格式化的方式输出它。
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
This turns
这转
{ "foo": "sample", "bar": "sample" }
into
进入
{
"foo": "sample",
"bar": "sample"
}
Now the data is a readable format you can use the Google Code Prettifyscript as suggested by @A. Levy to colour code it.
现在数据是一种可读格式，您可以按照@A 的建议使用Google Code Prettify脚本。Levy 对其进行颜色编码。
It is worth adding that IE7 and older browsers do not support the JSON.stringify method.
值得补充的是，IE7 和更旧的浏览器不支持 JSON.stringify 方法。
回答by RedFilter
If you are deliberately displaying it for the end user, wrap the JSON text in <PRE>and <CODE>tags, e.g.:
如果您故意向最终用户显示它，请将 JSON 文本包裹在<PRE>和<CODE>标签中，例如：
<html>
<body>
<pre>
<code>
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
</code>
</pre>
</body>
</html>
Otherwise I would use JSON Viewer.
否则我会使用JSON Viewer。
回答by A. Levy
For the syntax highlighting, use code prettify. I believe this is what StackOverflow uses for its code highlighting.
对于语法高亮，请使用code prettify。我相信这就是 StackOverflow 用于其代码突出显示的内容。
- Wrap your formatted JSON in code blocks and give them the "prettyprint" class.
- Include prettify.js in your page.
- Make sure your document's body tag calls
prettyPrint()when it loads
- 将格式化的 JSON 包装在代码块中，并为它们提供“prettyprint”类。
- 在页面中包含 prettify.js。
- 确保您的文档的正文标签
prettyPrint()在加载时调用
You will have syntax highlighted JSON in the format you have laid out in your page. See here for an example. So if you had a code block like this:
您将以您在页面中布置的格式突出显示语法 JSON。有关示例，请参见此处。因此，如果您有这样的代码块：
<code class="prettyprint">
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
</code>
It would look like this:
它看起来像这样：
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
This doesn't help with the indenting, but the other answersseem to be addressing that.
这对缩进没有帮助，但其他答案似乎正在解决这个问题。
回答by Peter ?rneholm
I think you meant something like this: JSON Visualization
我想你的意思是这样的： JSON 可视化
Don't know if you might use it, but you might ask the author.
不知道你是否会使用它，但你可以问作者。
回答by warfares
something like this ??
像这样的东西？？
pretty-json
漂亮的json
https://github.com/warfares/pretty-json
https://github.com/warfares/pretty-json
live sample:
现场样品：
回答by Janus Troelsen
Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: How can I pretty-print JSON using JavaScript?
这是一个轻量级的解决方案，只执行 OP 要求的操作，包括突出显示但没有其他内容：如何使用 JavaScript 漂亮地打印 JSON？
回答by Chad
Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though
可以使用 JSON2HTML 将其转换为格式良好的 HTML 列表 .. 可能比您真正需要的更强大一些
回答by themihai
SyntaxHighlighteris a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demopage.
SyntaxHighlighter是用 JavaScript 开发的功能齐全的自包含代码语法高亮器。要了解 SyntaxHighlighter 的功能，请查看演示页面。
回答by Wayne Hartman
Here's a javasript tool that will convert JSON to XML and vice versa, which should enhance its readability. You could then create a style sheet to color it or do a complete transform to HTML.
这是一个 javasript 工具，可以将 JSON 转换为 XML，反之亦然，这应该会增强其可读性。然后，您可以创建一个样式表来为其着色或完全转换为 HTML。
http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html
http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html
回答by rfunduk
Your best bet is going to be using your back-end language's tools for this. What language are you using? For Ruby, try json_printer.
为此，您最好的选择是使用后端语言的工具。你使用什么语言？对于 Ruby，请尝试json_printer。
