将JSON显示为HTML

关于如何将JSON以人类可读的格式嵌入到HTML页面中，有什么建议吗?例如，当您在浏览器中查看XML时，大多数浏览器都会显示格式化的XML(缩进、适当的换行等)。我希望JSON的最终结果相同。

颜色语法高亮显示将是一个奖金。

谢谢

515316 次浏览
小开

如果你只是从调试的角度来做这件事，你可以使用诸如JSONovich这样的Firefox插件来查看JSON内容。

新版本的Firefox目前正在测试中，它将在本地支持这一点(很像XML)。

小开

如果你有意为最终用户显示它，则将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>

否则我将使用JSON查看器。

小开
我想你的意思是这样的: JSON可视化 < / p >

不知道你是否会用到它，但你可以问问作者。

小开

首先获取JSON字符串并从中生成真正的对象。循环遍历对象的所有属性，将项放置在无序列表中。每次你得到一个新对象，就创建一个新列表。

小开

下面是一个javasript工具，可以将JSON转换为XML，反之亦然，这应该会增强它的可读性。然后，您可以创建一个样式表来给它上色，或者将其完全转换为HTML。

http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html

小开

最好的办法是使用后端语言的工具。你在用什么语言?对于Ruby，尝试json_printer。

小开

对于语法高亮显示，使用代码美化。我相信这就是StackOverflow用来突出显示代码的方法。

  1. 将格式化的JSON包装在代码块中，并赋予它们“prettyprint”类。
  2. 在你的页面中包含pretty .js。
  3. 确保文档的body标签在加载时调用prettyPrint()

您将看到以页面中布局的格式突出显示的JSON语法。看到这里有一个例子。如果你有一个这样的代码块:

<code class="prettyprint">
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
</code>

它看起来是这样的:

var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}

这对缩进没有帮助，但其他答案似乎正在解决这个问题。

小开

SyntaxHighlighter是一个用JavaScript开发的功能齐全的自包含代码语法高亮显示。要了解SyntaxHighlighter的功能，请查看演示页面。

小开

可以使用JSON2HTML将其转换为格式化的HTML列表..可能比你真正需要的更强大一点

http://json2html.com

小开

您可以使用JSON。使用未格式化JSON的stringify函数。它以格式化的方式输出。

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

这

{ "foo": "sample", "bar": "sample" }

成

 {
"foo": "sample",
"bar": "sample"
}

现在数据是可读的格式，你可以使用@A建议的谷歌代码修饰脚本。Levy对其进行颜色编码。

值得添加的是IE7及更老版本的浏览器不支持JSON。stringify方法。

小开

这是一个轻量级的解决方案，只做OP要求的，包括高亮显示，但没有其他:如何使用JavaScript漂亮地打印JSON ?

小开

像这样的事情??

pretty-json

https://github.com/warfares/pretty-json

生动的示例:

< a href = " http://warfares.github。Io /pretty-json/" rel="nofollow noreferrer">http://warfares.github.io/pretty-json/


提交答案