javascript Angular JS 以树状格式呈现 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22168343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS render JSON in tree like format
提问by Bourne
How do I render JSON in tree like way just like http://jsonviewer.stack.hu/does using angular JS?
我如何像http://jsonviewer.stack.hu/那样使用 angular JS以树状方式呈现 JSON ？
回答by Mohsen
I've made this Angular directive for rendering JSON in a nice way. It's available in bower:
我已经制作了这个 Angular 指令，用于以一种很好的方式呈现 JSON。它在凉亭中可用：
https://github.com/mohsen1/json-formatter
https://github.com/mohsen1/json-formatter
回答by Brian Park
The technique you are interested in is 'recursive directive'. If you don't know how to write a directive yet, then you should start learning it first. The official Angular JS doc got a lot better in explaining about directive Creating Custom Directives
您感兴趣的技术是“递归指令”。如果您还不知道如何编写指令，那么您应该先开始学习它。Angular JS 官方文档在解释指令创建自定义指令方面做得更好
Once you know how to write custom directive, you can learn about recursive directive. I found this Google Groups thread helpful: Recursive directives. Especially, I found Mark Lagendijk's Recursion Helper servicein that thread very useful.
一旦您知道如何编写自定义指令，您就可以了解递归指令。我发现这个 Google Groups 线程很有帮助：递归指令。特别是，我发现该线程中Mark Lagendijk 的 Recursion Helper 服务非常有用。
Make sure to checkout the examples there. Some relevant examples for you are:
请务必查看那里的示例。一些相关的例子是：
In the jsfiddle example above, take a look at:
在上面的jsfiddle例子中，看一下：
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {family: '='},
template:
'<ul>' +
'<li ng-transclude></li>' +
'<p>{{ family.name }}</p>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr, transclude) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents, transclude);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
Some of the code above is abstracted away by Mark Lagendijk's Recursion Helper service I mentioned above.
上面的一些代码被我上面提到的 Mark Lagendijk 的 Recursion Helper 服务抽象掉了。
Lastly, I implemented angular-json-human, which renders JSON in a nested table structure, which makes it easier for human to read. You can modify it to suit your need. The demo is hereand the repo is here
最后，我实现了angular-json-human，它在嵌套表结构中呈现 JSON，这使人们更容易阅读。您可以修改它以满足您的需要。演示在这里，回购在这里
Hope this helps!
希望这可以帮助！
回答by Matteo Tosato
I wrote a function to display a JSON data in the angular-ui-tree component.
我编写了一个函数来在 angular-ui-tree 组件中显示 JSON 数据。
The key point is the following:
关键点如下：
In your parse routine, keep the 'JSON string' of the current node in the node itself, every 'not parsed' node has this payload and a 'load' function.
在您的解析例程中，将当前节点的“JSON 字符串”保留在节点本身中，每个“未解析”节点都有此有效负载和“加载”函数。
function parse(name, value) {
var node = {
name: name
};
if (Array.isArray(value)) {
node.isEmpty = value.length === 0;
node.payload = value;
node.props = [];
node.load = function(node) {
for (var i = 0; i < node.payload.length; i++) {
node.props.push(parse(node.name + '[' + i + ']', node.payload[i]));
}
delete node.isEmpty;
delete node.payload;
}
} else if (value !== undefined && value !== null && typeof value === 'object') {
node.isEmpty = Object.keys(value).length === 0;
node.payload = value;
node.props = [];
node.load = function(node) {
var keys = Object.keys(node.payload);
for (var i = 0; i < keys.length; i++) {
node.props.push(parse(node.name + '.' + keys[i], node.payload[keys[i]]));
}
delete node.isEmpty;
delete node.payload;
}
} else {
node.value = value;
}
return node;
}
Then, when the user click on the toggle button you can call this function to parse the next nodes in the tree and bind tha data to the HTML.
然后，当用户单击切换按钮时，您可以调用此函数来解析树中的下一个节点并将数据绑定到 HTML。
Can be more clear with a example: https://jsfiddle.net/MatteoTosato/ghm4z606/
用一个例子可以更清楚：https: //jsfiddle.net/MatteoTosato/ghm4z606/
