如何以树状结构显示json数据答案

【问题标题】：How to display the json data in tree structure如何以树状结构显示json数据
【发布时间】：2017-12-12 15:11:44
【问题描述】：

我有一个 json 数据，我想使用 AngularJS 在 html 页面中显示为树。此外，我想使该树动态化，以便以后，如果我在该 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"
            }
    }
}

【问题讨论】：

在网络上搜索“角树”会为您提供大量结果。 Stackoverflow 不是“如何做” 教程服务...尤其是当没有任何努力解决手头的问题时

标签： javascript html angularjs json

【解决方案1】：

您可以使用Jquery json viewer插件将json显示为树，

如下 sn-p :

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>

【讨论】：