logo标签列表

将JSON显示为HTML

htmljson
220

有没有建议在HTML页面中嵌入JSON并以易于阅读的样式格式化JSON的方法？例如，当您在浏览器中查看XML时，大多数浏览器都会显示格式化的XML（缩进、正确的换行符等）。我希望JSON也能达到同样的效果。

语法高亮显示会是一个额外的加分项。

谢谢。

http://tohtml.com/javaProperties/ 对我很有帮助；它可以将样式“内联”，非常适合简单地复制粘贴到其他地方。 - Andrew Bucklin
1
请查看我的库：http://azimi.me/json-formatter-js/ - Mohsen
难以置信，这个有用的问题竟然被关闭了。 - TheLegendaryCopyCoder
12个回答
192

你可以使用JSON.stringify函数来处理未格式化的JSON数据。它会以格式化的方式输出它。

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

这会使

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

转化为

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

现在数据已经以可读格式呈现，您可以像@A. Levy建议的那样使用Google Code Prettify脚本对其进行着色编码。

值得注意的是，IE7及更早版本的浏览器不支持JSON.stringify方法。

4
对于不支持JSON.stringify的浏览器（就坦率地说吧，就是旧版IE），你可以使用一个很好的polyfill来获取这个功能（http://www.json.org/js.html）。只需引入它，你几乎无论在哪里都能使用。 - John Munsch
1
另一个技巧是，如果您在缩进字段（4）的位置放置一个 <br> 标签，您将获得漂亮的换行效果。 - Jonathan
5
最佳答案：完成任务且无需包含第三方库。 - BlaShadow
1
我曾经在一个使用案例中成功地使用了它，其中需要将人类格式化的JSON显示在HTML <textarea>元素中。看起来它做得非常好。 - CSSian
2
把这个放在<pre>标签里，至少在调试时可以使用，当你不能使用console.log()时。 - sparklos
显示剩余2条评论
145
如果你有意向将其展示给最终用户，请将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查看器。
16
如果字符串都在一行中，他该如何将其格式化得漂亮？ - geowa4
2
你太棒了。这是对一个非常复杂的问题的最简单的答案——如何在HTML中漂亮地打印Python JSON。谢谢你。 - Marc Cenedella
1
不知道为什么这个没有更多的赞。简单易行的解决方案。 - anthv123
14
@geowa4，JSON.stringify(jsonObj, null, ' ') 将使用两个空格使它变得更美观。我知道现在已经晚了，但认为这个提示可能会有所帮助。 - hIpPy
2
当您进入codeplex.com时，Firefox会发出警告：该网站可能包含有害程序。 - JRichardsz
1
这是在ReactJs应用程序中适用于我的方法。<pre><span>{JSON.stringify(data, null, ' ')}</span></pre> - Rashid
68

为了进行语法高亮，请使用code prettify。我相信这是 StackOverflow 用于代码高亮的工具。

  1. 将格式化的 JSON 代码块放入带有“prettyprint”类的代码块中。
  2. 在页面中引入 prettify.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
    }
}

这并不能帮助缩进，但是其他答案似乎在解决这个问题。

1
现在所有的 Google Code 存储库都已经被冻结，因此我们应该直接将新用户引导到新的 GitHub 存储库：https://github.com/google/code-prettify。 - adelriosantiago
你如何在 AJAX 返回中使其工作？该代码不会在页面加载时出现，而是在 AJAX 调用后才会出现。 - toddmo
@toddmo，你应该能够在 AJAX 返回的响应处理函数中按照我的三个步骤进行操作。因此，处理程序将调用 prettyPrint 而不是 body 的 onLoad 方法。我希望这样可以解决问题。 - A. Levy
Janus Troelsen的答案很好用，所以我就采用了他的方法。你应该试试他的PHP->HTML转换方式，非常简单。 - toddmo
41
我认为你想表达的是这样一个意思：JSON可视化。
不知道你是否会使用它，但你可以联系作者咨询。
真棒！太好了！我不知道该说什么...非常感谢你。 - fdrv
真是一个好工具！ - David Lilljegren
30
@PM2Ring的链接有效。 - Rashid
5
一个优秀的功能，不仅仅是对我而言，如果你只想做PHP -> HTML，这就是原因：它非常轻量级，比谷歌更简单易用，体积更小，也不需要信任一个巨型公司。你实际上可以查看代码并理解它。 - toddmo
3
你可以使用JSON2HTML将其转换为格式良好的HTML列表，这可能比你实际需要的更强大一些。 http://json2html.com
1
抱歉，看起来 jQuery 插件网站已经消失了。请尝试访问 http://json2html.com。 - Chad Brown
尝试使用我的GitHub链接：https://github.com/viscocent/JSON2HTML 来解决简单的问题。 - Viscocent
我想更新一下，使用可视化工具http://visualizer.json2html.com。 - Chad Brown
1

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

目前正在测试中的新版 Firefox 将原生支持此功能（类似于 XML）。

0

SyntaxHighlighter 是一个完全功能的自包含代码语法高亮器，使用 JavaScript 开发。如果想了解 SyntaxHighlighter 的能力，请查看 演示 页面。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接