2025-04-12 10:00:01

将JSON显示为HTML

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

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

谢谢


当前回答

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

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

其他回答

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

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

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

into

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

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

值得补充的是,IE7和更老的浏览器不支持JSON。stringify方法。

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

http://json2html.com

像这样的事情??

pretty-json

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

生动的示例:

http://warfares.github.io/pretty-json/

首先获取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。