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

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

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON显示为HTMLEN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将JSON显示为HTML
EN