blocks|key|1338045|text|如果只是从调试的角度考虑，可以使用诸如JSONovich之类的Firefox插件来查看JSON内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1338046|目前处于测试阶段的Firefox的新版本本来就支持这一点(就像XML一样)|1338047|entityMap|0|LINK|mutability|MUTABLE|url|https://addons.mozilla.org/en-US/firefox/addon/10122^0|J|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

If you're just looking to do this from a debugging standpoint, you can use a Firefox plugin such as <a href="https://addons.mozilla.org/en-US/firefox/addon/10122" rel="nofollow noreferrer">JSONovich</a> to view the JSON content.

The new version of Firefox that is currently in beta is slated to natively support this (much like XML)

blocks|key|1338061|text|如果您有意将其显示给最终用户，请将JSON文本包装在<PRE>和<CODE>标记中，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1338062|<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>|code-block|syntax|javascript|1338063|否则我会使用JSON+Viewer。|1338064|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codeplex.com/JsonViewer^0|Q|5|W|6|0|0|6|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

If you are deliberately displaying it for the end user, wrap the JSON text in <code>&lt;PRE&gt;</code> and <code>&lt;CODE&gt;</code> tags, e.g.:

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;pre&gt;
&lt;code&gt;
[
 {
 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"
 }
]

&lt;/code&gt;
&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Otherwise I would use <a href="http://www.codeplex.com/JsonViewer" rel="noreferrer">JSON Viewer</a>.

blocks|key|1338105|text|我想你的意思是这样的：JSON+Visualization|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1338106|不知道你是否会使用它，但你可以问作者。|1338107|entityMap|0|LINK|mutability|MUTABLE|url|http://chris.photobooks.com/json/default.htm^0|B|I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I think you meant something like this:
<a href="http://chris.photobooks.com/json/default.htm" rel="noreferrer">JSON Visualization</a>

Don't know if you might use it, but you might ask the author.

blocks|key|1553842|text|首先，获取JSON字符串并将其转换为real+objects。循环遍历对象的所有属性，将项放在无序列表中。每次你到达一个新的对象，做一个新的列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1553843|entityMap|0|LINK|mutability|MUTABLE|url|http://json.org/^0|I|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

First take the JSON string and make <a href="http://json.org/" rel="nofollow noreferrer">real objects</a> out of it. Loop though all of the properties of the object, placing the items in an unordered list. Every time you get to a new object, make a new list.

blocks|key|1338193|text|这里有一个javasript工具，它可以将JSON转换为XML，反之亦然，这将增强其可读性。然后，您可以创建一个样式表来对其进行着色，或者对HTML进行完整的转换。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1338194|http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html|offset|length|1338195|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|20|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Here's a javasript tool that will convert JSON to XML and vice versa, which should enhance its readability. You could then create a style sheet to color it or do a complete transform to HTML.

<a href="http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html" rel="nofollow noreferrer">http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html</a>

blocks|key|1338203|text|你最好的选择就是使用后端语言的工具来实现这一点。你用的是什么语言？对于Ruby，可以尝试json_printer。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1338204|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/techcrunch/json_printer/tree/master^0|18|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Your best bet is going to be using your back-end language's tools for this. What language are you using? For Ruby, try <a href="http://github.com/techcrunch/json_printer/tree/master" rel="nofollow noreferrer">json_printer</a>.

blocks|key|1338240|text|可以使用JSON2HTML将其转换为格式良好的HTML列表。它可能比你真正需要的功能更强大一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1338241|http://json2html.com|offset|length|1338242|entityMap|0|LINK|mutability|MUTABLE|url|http://json2html.com/^0|0|0|K|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though

<a href="http://json2html.com" rel="nofollow">http://json2html.com</a>

blocks|key|1553962|text|您可以将JSON.stringify函数与未格式化的JSON一起使用。它以格式化的方式输出它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1553963|JSON.stringify({+foo:+"sample",+bar:+"sample"+},+null,+4)|code-block|syntax|javascript|1553964|这就变成了|1553965|{+"foo":+"sample",+"bar":+"sample"+}|1553966|转到|1553967|+{
+++++"foo":+"sample",+
+++++"bar":+"sample"+
+}|1553968|现在数据是一种可读的格式，您可以使用@A.Levy建议的Google+Code+Prettify脚本对其进行颜色编码。|offset|length|1553969|这是值得添加的IE7+and+older+browsers+do+not+support+the+JSON.stringify+method。|1553970|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/google/code-prettify|1|http://caniuse.com/json^0|0|0|0|0|0|0|S|K|0|0|7|1R|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$Q|1B|R|1C|1|1D]]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$Q|1F|R|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

You can use the JSON.stringify function with unformatted JSON. It outputs it in a formatted way. 

<pre><code>JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
</code></pre>

This turns

<pre><code>{ "foo": "sample", "bar": "sample" }
</code></pre>

into

<pre><code> {
 "foo": "sample", 
 "bar": "sample" 
 }
</code></pre>

Now the data is a readable format you can use the <a href="https://github.com/google/code-prettify" rel="noreferrer">Google Code Prettify</a> script as suggested by @A. Levy to colour code it.

It is worth adding that <a href="http://caniuse.com/json" rel="noreferrer">IE7 and older browsers do not support the JSON.stringify method</a>.

blocks|key|1554024|text|这里有一个轻量级的解决方案，只做OP要求的事情，包括突出显示，但不做其他事情：How+can+I+pretty-print+JSON+using+JavaScript?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1554025|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript^0|13|19|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: <a href="https://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript">How can I pretty-print JSON using JavaScript?</a>

blocks|key|1554081|text|就像这样?？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1554082|漂亮的json|1554083|https://github.com/warfares/pretty-json|offset|length|1554084|实时样本：|1554085|http://warfares.github.com/pretty-json/|1554086|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|13|0|0|0|0|13|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|E]]|S|$5|O|P|Q|A|$R|K]]]]

something like this ?? 

pretty-json

<a href="https://github.com/warfares/pretty-json">https://github.com/warfares/pretty-json</a>

live sample:

<a href="http://warfares.github.com/pretty-json/">http://warfares.github.com/pretty-json/</a>

Any recommendations on how to embed JSON in an HTML page with the JSON formatted in a human readable style? For example, when you view XML in a browser, most browsers display the XML formatted (indented, proper line breaks, etc). I'd like the same end result for JSON.

Color syntax highlighting would be a bonus.

Thanks

Display JSON as HTML

JSON

关于如何在HTML页面中嵌入JSON，并将JSON格式化为人类可读的样式，有什么建议吗？例如，当您在浏览器中查看XML时，大多数浏览器都会显示格式化的XML (缩进、适当的换行符等)。我希望JSON也能得到同样的最终结果。颜色语法突出显示将是一个额外的奖励。谢谢

问将JSON显示为HTML
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON显示为HTMLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON显示为HTML
EN