木構造でjsonデータを表示する方法

Question

AngularJSを使用してhtmlページにツリーとして表示したいjsonデータがあります。 また、そのツリーを動的にして、後でそのjsonにデータを追加すると、htmlコードを変更する必要はありません。ここで

は私のJSONです：

{ 
"Customer1": { 
    name: "Customer1" 
    "CODEGROUP1": { 
     "name": "Group1", 
     "CODELIST":{ 
      "CODE18": { 
       "name": "Test51", 
       "codeId": "526" 
      } 
     } 
    }, 
    "CODEGROUP2": { 
     "name": "Group2", 
     "CODEGROUP3": { 
      "name": "Group3", 
      "CODELIST": { 
       "CODE19": { 
        "name": "Test52", 
        "codeId": "582" 
       } 
      } 
     }, 
     "CODELIST": { 
      "CODE20": { 
       "name": "Test53", 
       "codeId": "554" 
      } 
     } 
    }, 
    "CODELIST": { 
      "CODE21": { 
       "name": "Test55", 
       "codeId": "564" 
      } 
    } 
} 

Answer 1

あなたはスニペット以下のように、ツリーとしてJSONを表示する

をJquery json viewerプラグインを使用することができます。

var data = { 
 
    "data": "value", 
 
    "data2": { 
 
    "mounir": "mounir", 
 
    "mounir2": { 
 
     "city": "bRIMOs", 
 
     "data3": "value3" 
 
    } 
 
    } 
 
} 
 

 
$(function(){ 
 
    $('#json-renderer').jsonViewer(data); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://rawgit.com/abodelot/jquery.json-viewer/master/json-viewer/jquery.json-viewer.js"></script> 
 
<link href="https://rawgit.com/abodelot/jquery.json-viewer/master/json-viewer/jquery.json-viewer.css" rel="stylesheet"/> 
 
<pre id="json-renderer"></pre>