将JSON显示为HTML

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

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

谢谢

当前回答

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

2009-05-19 17:11:31

其他回答

我想你的意思是这样的 JSON可视化

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

2009-05-19 17:13:18

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

将格式化的JSON包装在代码块中，并赋予它们“prettyprint”类。在你的页面中包含pretty .js。确保文档的主体标记在加载时调用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
    }
}

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

2009-05-19 17:22:44

如果您只是从调试的角度来做这件事，那么您可以使用一个Firefox插件(如JSONovich)来查看JSON内容。

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

2009-05-19 17:11:13

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

http://json2html.com

2011-06-23 19:02:09

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

2012-03-07 14:20:14

将JSON显示为HTML

推荐文章

最新文章

标签