将 JSON 显示为 HTML [关闭]答案

【问题标题】：Display JSON as HTML [closed]将 JSON 显示为 HTML [关闭]
【发布时间】：2010-10-27 09:44:51
【问题描述】：

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

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

谢谢

【问题讨论】：

tohtml.com/javaProperties 对我来说效果很好；它使样式“内联”；对于简单的复制粘贴到其他内容非常有帮助。
查看我的图书馆azimi.me/json-formatter-js

标签： html json

【解决方案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。

【讨论】：

对于不支持 JSON.stringify 的浏览器（让我们直说吧，旧 IE），有一个出色的 polyfill 可以用来获取功能 (json.org/js.html)。只需将其包括在内，您几乎可以在任何地方得到覆盖。
另一个技巧是如果你放一个
而不是缩进字段 (4)，你会得到很好的换行符
最佳答案，完成工作，不需要包含第三方库。
我在一个用例中使用这个效果很好，在这个用例中，人类格式化的 JSON 必须显示在 HTML 元素中。似乎做得很好。
把这个放在时，你已经设置好了，至少出于调试目的

【解决方案2】：

对于语法高亮，使用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 似乎正在解决这个问题。

【讨论】：

现在所有 Google 代码存储库都已冻结，我们应该将新用户直接指向新的 GitHub 存储库：https://github.com/google/code-prettify
你怎样才能让它在 AJAX 返回中工作？代码在正文加载时不存在，但仅在 ajax 调用之后。
@toddmo 您应该能够按照我在 AJAX 返回的响应处理函数中的 3 个步骤进行操作。所以处理程序将调用 prettyPrint 而不是 body 的 onLoad 方法。我希望这应该可行。
Janus Troelsen 的回答落入其中并且刚刚奏效，所以我同意了。你应该检查一下 PHP->HTML，很简单。

【解决方案3】：

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

【讨论】：

一个卓越的功能，不只是对我来说，如果你想要做的只是 PHP -> HTML，原因如下：它非常轻量级，比 Google 使用起来更简单，更小，而且不需要信任大型公司。其实看代码就可以理解了。

【解决方案4】：

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

http://json2html.com

【讨论】：

抱歉，jquery 插件站点好像已经消失了，再见.. 试试json2html.com
试试我的：github.com/viscocent/JSON2HTML 解决更简单的问题
想我会用可视化工具visualizer.json2html.com更新这个

【解决方案5】：

这样的？？

漂亮的json

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

现场样本：

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

【讨论】：

【解决方案6】：

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

不知道能不能用，可以问问作者。

【讨论】：

虚幻！伟大的！我不知道该说什么...非常感谢您
真是个好工具！

【解决方案7】：

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

【讨论】：

【解决方案8】：

最好的办法是为此使用后端语言的工具。您使用什么语言？对于 Ruby，请尝试 json_printer。

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

首先获取 JSON 字符串并从中生成real objects。循环遍历对象的所有属性，将项目放置在无序列表中。每次遇到新对象时，都要创建一个新列表。

【讨论】：

【解决方案11】：

如果您有意将其显示给最终用户，请将 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。

【讨论】：

如果字符串都在一行中怎么办？他是怎么把它变成那样的格式的？
你摇滚。这是一个非常复杂的问题的最简单答案——如何在 html 中漂亮地打印 python json。谢谢。
不知道这怎么没有更多的赞成票。简单易行的解决方案。
@geowa4, JSON.stringify(jsonObj, null, ' ') 将用 2 个空格美化它。我知道这已经晚了，但我认为这个提示会有所帮助。
firefox 警告：当您进入 codeplex.com 时，前面的站点可能包含有害程序

【解决方案12】：

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

目前处于测试阶段的新版 Firefox 计划原生支持此功能（很像 XML）

【讨论】：