javascript - HTMLで任意のJSONをレンダリングする

Question

サーバーからJSONとして送信されるオブジェクトをレンダリングするためのデータビューアページを作成しています。JSONオブジェクトは、少数の属性を持つフラットオブジェクトから、ネストフィールドと配列フィールドの複数のレイヤーを持つより大きな構造まで、内容と複雑さが異なります。私がやりたいのは、おそらくulとして、オブジェクトの単純な表現をレンダリングすることです。そこから、クリック可能な展開/折りたたみ動作などを可能にするものを追加できます。

これには、トップレベルで呼び出すことができる再帰関数が必要になることを知っています。この関数は、検出されたネストのレベルごとに再度呼び出されます。私はJavascriptにあまり自信がなく、あまり理解していません。また、属性名がわからないという事実にも問題があります。オブジェクトが異なれば、属性も名前も異なります。

このようなオブジェクトをレンダリングする比較的簡単な方法はありますか、それともサーバーが送信するJSONの形式を変更する必要がありますか？

編集：JSONのサンプルはおそらくあまり役に立ちません。それらは大きく異なります。私が言ったように、いくつかは単純で、いくつかは非常に複雑です。最も単純なオブジェクトは次のようなものです。

{
    "id": "5",
    "category": "12",
    "created": "25-Sep-2012"
}

私が現在持っている最も複雑なものは次のようなものですが：

{
   "Attempted":"EditUser",
   "Exception":{
      "Message":"Something",
      "TargetSite":"somewhere",
      "Inner Exception":{
         "Message":"Something else",
         "TargetSite":"somewhere.core",
             "Inner Exception":{
            "Message":"Another message",
            "TargetSite":"something.core.subr",
            "Inner Exception":{
               "Message":"Object reference not set to an instance of an object.",
               "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
               "StackTrace":[
                  "at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
               ],
               "Inner Exception":{

               }
            }
         }
      }
   },
   "details":{
      "userEmail":"test@email.com",
      "userId":"25",
      "userRole":"User"
   }
}

ご覧のとおり、これはソフトウェアによってスローされた例外を含むエラーログのJSON表現です（機密性の高い詳細は隠されています）。JSONオブジェクトは、監査ログの「詳細」フィールドから生成されるため、将来、詳細が現在予測しているものとは異なる形式でログに記録される可能性があります。そのため、任意のJSONを処理せずに処理しようとしています。フォーマットを知ることに依存しています。

score 11 · Accepted Answer

BFSアルゴリズムのようなものを使用できます。簡単な例を次に示します（jQueryによって異なります）。

css

ul {
    margin-left: 1em;
}

.json-key {
    font-weight: bold;
}

html

<div id="json-viewer"></div>

javascript

function visitObj($container, obj) {
    var $ul = $('<ul>');

    for (var prop in obj) {

        var $li = $('<li>');
        $li.append('<span class="json-key">' + prop + ': </span>');
        if (typeof obj[prop] === "object") {
             visitObj($li, obj[prop]);
        } else {
            $li.append('<span class="json-value">'+obj[prop]+'</span>');                   
        }
        $ul.append($li);
    }
    $container.append($ul);
}

だからあなたの例でこれを呼び出す：

visitObj($('#json-viewer'), {
   "Attempted":"EditUser",
   "Exception":{
      "Message":"Something",
      "TargetSite":"somewhere",
      "Inner Exception":{
         "Message":"Something else",
         "TargetSite":"somewhere.core",
             "Inner Exception":{
            "Message":"Another message",
            "TargetSite":"something.core.subr",
            "Inner Exception":{
               "Message":"Object reference not set to an instance of an object.",
               "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
               "StackTrace":[
                  "at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
               ],
               "Inner Exception":{

               }
            }
         }
      }
   },
   "details":{
      "userEmail":"test@email.com",
      "userId":"25",
      "userRole":"User"
   }
});

実用的な例については、このフィドルを参照してください。

score 3 · Accepted Answer

私自身の角笛を鳴らして、あなたはおそらくあなたのニーズにJSON2HTMLを適応させることができます。ソースはhttps://github.com/bloopletech/json2htmlにあります-JSONを解析してHTMLを生成するコアについてはscripts/parse.jsを参照してください。

score 2 · Accepted Answer

visualr.json2html.comのソースコードを確認してください。これにより、投げたjsonがほぼ視覚化されます。

これは、ビジュアライザーが上記のjsonサンプルで実行できたことのスクリーンショットです。ここでも、コードはすべて揃っており、ピッキングに適しています:)

ここに画像の説明を入力してください

score 1 · Accepted Answer

JSONからHTMLへのレンダリングと変換を自動的に行う既存のライブラリを使用できます。しかし、JSONを読み取ったりレンダリングしたりした後で、よりパーソナライズされた処理を実行したい場合は、プレーンな古いJavaScriptに非常によく依存できます（結局のところ、すべての.jsライブラリはプレーンな古いJSを使用して記述されています）

基本的に、JSONをレンダリングし、そこからデータを抽出する必要があります。必要なデータを取得したら、それを任意の形式に変換できます。オブジェクトのタイプをチェックし、それがプリミティブデータ型である場合はデータを抽出し、そうでない場合は、プリミティブデータ型が見つかるまで再帰呼び出しを実行する必要があります。

このためのコードスニペットは次のとおりです。

function renderJson(jsonObject){   
    for(var objType in jsonObject){
        if(typeof jsonObject[objType] === 'object'){
            renderJson(jsonObject[objType]);
        }
        else{
            alert(' name=' + objType + ' value=' + jsonObject[objType]);
        }
    }
}

ここで試してください

これは非常に基本的なコードスニペットです。このスニペットは、ニーズに合わせて変更できます。

JSを使用してJSONオブジェクトと配列を操作する方法の詳細については、http：//www.json.org/js.htmlを参照してください。

javascript - HTMLで任意のJSONをレンダリングする

4 に答える 4

Related

Reference