Question

有关如何将JSON嵌入HTML页面的任何建议，其中JSON格式为人类可读的样式吗？例如，当您在浏览器中查看XML时，大多数浏览器都会显示XML格式（缩进，正确的换行符等）。我想要与JSON相同的最终结果。

颜色语法突出显示将是一个奖励。

由于

Answer 1

您可以将JSON.stringify函数与未格式化的JSON一起使用。它以格式化的方式输出它。

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

这转变

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

到

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

现在数据是一种可读格式，您可以使用@A建议的Google Code Prettify脚本。征收颜色代码。

值得添加IE7 and older browsers do not support the JSON.stringify method。

Answer 2

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

Answer 3

对于语法突出显示，请使用code prettify。我相信这就是StackOverflow用于代码突出显示的内容。

将格式化的JSON包装在代码块中，并为它们提供“prettyprint”类。
在您的页面中包含prettify.js。
确保文档的正文标记在加载时调用prettyPrint()

您将使用您在页面中列出的格式突出显示语法JSON。见here for an example。所以如果你有这样的代码块：

<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
    }
}

这对缩进没有帮助，但other answers似乎正在解决这个问题。

Answer 4

我认为你的意思是这样的： JSON Visualization

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

Answer 5

这样的事情？

漂亮-JSON

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

实时样本：

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

Answer 6

这是一个轻量级的解决方案，只做OP所要求的，包括突出显示，但没有别的：How can I pretty-print JSON using JavaScript?

Answer 7

可以使用JSON2HTML将其转换为格式良好的HTML列表..虽然可能比你真正需要的更强大

http://json2html.com

Answer 8

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

Answer 9

如果您只是想从调试的角度来看，可以使用Firefox插件（例如JSONovich）来查看JSON内容。

目前处于测试阶段的新版Firefox预计将本身支持此功能（非常类似于XML）

Answer 10

这是一个javasript工具，它将JSON转换为XML，反之亦然，这将增强其可读性。然后，您可以创建样式表以对其进行着色或完整转换为HTML。

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

Answer 11

您最好的选择是使用您的后端语言工具。你用的是什么语言？对于Ruby，请尝试json_printer。

Answer 12

首先获取JSON字符串并使其中real objects。循环访问对象的所有属性，将项目放在无序列表中。每次到达新对象时，请创建一个新列表。

将JSON显示为HTML

12 个答案: