26

重複の可能性:
JavaScript を使用した JSON プリティ プリント

JSONview と同じように、生の JSON データを HTML ページに表示したいと考えています。たとえば、私の生のjsonデータは次のとおりです。

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

http://jsonview.com/から来ており、Chrome を使用して JSONView プラグインをインストールしている場合、私が達成したいのは http://jsonview.com/example.jsonのようなものです。

私は試しましたが、それがどのように機能するかを理解できませんでした。JS スクリプト (強調表示する CSS) を使用して、ajax によって取得された生の JSON データをカスタムフォーマットし、最終的に div 要素のような任意の位置の HTML ページに配置したいと思います。これを実現できる既存の JS ライブラリはありますか? またはそれを行う方法は？

4

3 に答える 3

38

HTMLページにデータを表示するために必要なのはJSON.stringify.

たとえば、JSON が次のように保存されているとします。

var jsonVar = {
        text: "example",
        number: 1
    };

次に、これを文字列に変換するためにこれを行うだけです。

var jsonStr = JSON.stringify(jsonVar);

次に、HTML に直接挿入できます。たとえば、次のようになります。

document.body.innerHTML = jsonStr;

もちろん、おそらく をbody介して他の要素に置き換えたいと思うでしょうgetElementById。

質問の CSS 部分については、RegExp を使用して文字列化されたオブジェクトを操作してから、DOM に入れることができます。たとえば、このコード (デモンストレーション目的で JSFiddle にもあります) は、中括弧のインデントを処理する必要があります。

var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document

このコードは、文字列内のオブジェクトのセクションを検索し、それらを div に分割するだけです (ただし、その HTML 部分は変更できます)。ただし、中括弧に遭遇するたびに、それが左中括弧か右中括弧かによって、インデントを増減します ( 'JSON.stringify' のスペース引数と同様の動作)。ただし、これをさまざまな種類の書式設定の基礎として使用できます。

于 2013-01-07T14:33:20.807 に答える
8

指定したリンクは HTML ページではなく、JSON ドキュメントであることに注意してください。フォーマットはブラウザによって行われます。

次のことを決定する必要があります。

  1. 例のように、生の JSON (HTML ページではない) を表示したい
  2. フォーマットされた JSON を含む HTML ページを表示する

1. が必要な場合は、JSON を使用して応答本文をレンダリングするようにアプリケーションに指示するだけで、MIME タイプ (application/json) を設定するなどします。この場合、書式設定はブラウザー (および/またはブラウザー プラグイン) によって処理されます。

2. の場合は、いくつかの方法でハイライトできる JSON を使用して単純な最小限の HTML ページをレンダリングするだけです。

  • スタックに応じて、サーバー側。ほぼすべての言語に対応するソリューションがあります
  • Javascript ハイライト ライブラリを使用したクライアント側。

スタックの詳細を提供すると、例やリソースを提供しやすくなります。

編集: クライアント側の JS の強調表示については、たとえば、 higlight.jsを試すことができます。

于 2013-01-07T12:08:51.600 に答える
0

タグを除くすべてのHTMLタグのJSONは<script>、単なるテキストになります。したがって、HTMLページにストーリーを追加するようなものです。

ただし、フォーマットについては、別の問題です。質問のタイトルを変更する必要があると思います。

この質問を見てください。このページも参照してください。

于 2013-01-07T12:12:06.890 に答える