JSONをHTMLとして表示する[終了]

178

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

カラー構文の強調表示はおまけです。

ありがとう

html  json 
— ジョン・ムコウ
ソース
tohtml.com/javaPropertiesは私にとってうまくいきました。スタイルを「インライン」にします。他の何かへの単純なコピーアンドペーストに非常に役立ちます。
— Andrew Bucklin 2013年
私のライブラリazimi.me/json-formatter-jsを
— Mohsen

回答:

147

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

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

これは回る

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

に

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

これで、データは読み取り可能な形式になり、Google Code Prettifyを使用できます提案スクリプトを。それを色分けする課税。

IE7以前のブラウザはJSON.stringifyメソッドをサポートしていないことを付け加えておきます。

— ジョン
ソース
4
JSON.stringifyをサポートしていないブラウザー（古いIEを出して言ってみましょう）には、機能を実現するために使用できる優れたポリフィルがあります（json.org/js.html）。それを含めるだけで、ほとんどすべての場所でカバーされます。
— John Munsch
1
別のトリックは、インデントフィールド（4）の代わりに<br>を配置すると、素晴らしい改行が得られる
— Jonathan
5
最良の答えは、仕事をし、サードパーティのライブラリを含める必要はありません。
— BlaShadow 2014年
1
これを使用して、人間がフォーマットしたJSONをHTMLの<textarea>要素に表示する必要がある使用例に大きな効果をもたらしました。素晴らしい仕事をしているようだ。
— CSSian 2014
1
これを<pre。そして、少なくともデバッグの目的で、console.log（）を使用できないときに設定されます
— sparklos
93

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

— RedFilter
ソース
10
文字列がすべて1行にある場合はどうなりますか？彼はどうやってそれをそのようにうまくフォーマットするのですか？
— geowa4 2009年
2
あなたはロックします。これは非常に複雑な質問に対する最も簡単な答えです-HTMLでpython jsonをきれいに出力する方法。ありがとうございました。
— マークセネデラ2013
1
これがこれ以上の賛成票を持っていないか分からない。シンプルで簡単なソリューション。
— anthv123 2013
9
@ geowa4、2 JSON.stringify(jsonObj, null, ' ')つのスペースでそれを美化します。私はこれが遅いことを知っていますが、このヒントが役立つと思いました。
— hIpPy
2
firefoxの警告：codeplex.comにアクセスすると、先のサイトに有害なプログラムが含まれている可能性があります
— JRichardsz
65

構文の強調表示には、コードprettifyを使用します。StackOverflowがコードの強調表示に使用するのはこれだと思います。

  1. フォーマット済みのJSONをコードブロックでラップし、「prettyprint」クラスを指定します。
  2. ページにprettify.jsを含めます。
  3. prettyPrint()読み込み時にドキュメントのbodyタグが呼び出されることを確認してください

ページにレイアウトした形式で、構文が強調表示された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
    }
}

これはインデントには役立ちませんが、他の答えはそれを解決しているようです。

— A.レヴィ
ソース
1
すべてのGoogle Codeリポジトリがフリーズされたので、新しいユーザーを新しいGitHubリポジトリに直接
— ポイントする必要があり
これをAJAXリターン内で機能させるにはどうすればよいですか？コードは本体のロード時にはありませんが、ajax呼び出しの後にのみ存在します。
— toddmo
@toddmo AJAXリターンの応答ハンドラー関数で3つのステップを実行できるはずです。したがって、ハンドラーは本体のonLoadメソッドの代わりにprettyPrintを呼び出します。うまくいくと思います。
— A.レビー
Janus Troelsenの答えが当てはまり、うまくいきました。PHP-> HTMLで簡単にチェックできるはずです。
— toddmo
5

これは軽量ソリューションで、OPが要求したことだけを実行し、強調表示だけを含め、他には何もしません。JavaScriptを使用してJSONをきれいに出力するにはどうすればよいですか？

— ヤヌス・トロエルセン
ソース
私にとってだけでなく、あなたがやりたいことがすべてPHP-> HTMLである場合の優れた機能、そしてその理由は次のとおりです。これは非常に軽量であり、Googleよりもはるかにシンプルで、非常に小さく、大企業を信頼する必要がないためです。 。実際にコードを見て理解することができます。
— toddmo
0

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

現在ベータ版であるFirefoxの新しいバージョンは、これをネイティブでサポートする予定です（XMLと同様）。

— アバターカバ
ソース
0

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

— rfunduk
ソース
-2

最初にJSON文字列を取得し、それから実際のオブジェクトを作成します。オブジェクトのすべてのプロパティをループして、項目を順序付けられていないリストに配置します。新しいオブジェクトにアクセスするたびに、新しいリストを作成します。

— geowa4
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.