web-dev-qa-db-ja.com

JSONをHTMLとして表示

人間が読める形式でフォーマットされたJSONを使用してHTMLページにJSONを埋め込む方法に関する推奨事項はありますか？たとえば、ブラウザでXMLを表示すると、ほとんどのブラウザではXMLがフォーマットされて表示されます（インデント、適切な改行など）。 JSONにも同じ結果が欲しいのですが。

カラーシンタックスハイライトはボーナスになります。

ありがとう

htmljson
162
John Muchow

未フォーマットのJSONでJSON.stringify関数を使用できます。フォーマットされた方法でそれを出力します。

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

これが変わります

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

に

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

これでデータは、@ Aで推奨されているように Google Code Prettify スクリプトを使用できる読み取り可能な形式になりました。それを色分けする徴収します。

それを追加する価値があります IE7以前のブラウザはJSON.stringifyメソッドをサポートしていません 。

131
John

意図的にエンドユーザー向けに表示する場合は、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 を使用します。

69
RedFilter

構文の強調表示には、 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
    }
}

これは字下げには役立ちませんが、 他の答え はそれに対処しているようです。

62
A. Levy

私はあなたがこのような何かを意味したと思います： JSON Visualization

あなたがそれを使うかもしれないかどうか知りませんが、あなたは作者に尋ねるかもしれません。

38
Peter Örneholm

このようなもの ？？

プリティージョンソン

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

ライブサンプル：

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

28
warfares

強調表示を含め、OPが求めたことだけを実行し、それ以外には何もしない、軽量の解決策を次に示します。 JavaScriptを使用してJSONをきれいに印刷する方法

5
Janus Troelsen

JSON2HTMLを使ってきれいに整形されたHTMLリストに変換することができます。

http://json2html.com

3
Chad

SyntaxHighlighterは、JavaScriptで開発された、完全に機能的な自己完結型コードのシンタックスハイライトです。 SyntaxHighlighterがどんな能力を持っているかについての考えを得るために、 demo ページを見てください。

1
themihai

デバッグの観点からこれを実行するだけの場合は、 JSONovich などのFirefoxプラグインを使用してJSONコンテンツを表示できます。

現在ベータ版になっているFirefoxの新しいバージョンは、これをネイティブにサポートする予定です（XMLによく似ています）

0
AvatarKava

これはJSONをXMLに、そしてその逆に変換するjavasriptツールで、読みやすさを向上させるはずです。その後、スタイルシートを作成してそれを色付けしたり、HTMLに完全に変換したりできます。

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

0
Wayne Hartman

あなたの最善の策は、これのためにあなたのバックエンド言語のツールを使うことになるでしょう。あなたはどの言語を使っていますか？ Rubyの場合は、 json_printer を試してください。

0
rfunduk