Question

我有一个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"
            }
    }
}

Answer 1

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

如下面代码段：

＆＃13;

var data = {
  "data": "value",
  "data2": {
    "mounir": "mounir",
    "mounir2": {
      "city": "bRIMOs",
      "data3": "value3"
    }
  }
}

$(function(){
  $('#json-renderer').jsonViewer(data);
});

＆＃13;

<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>

＆＃13;

如何在树结构中显示json数据

1 个答案: