Angular JS以类似树的格式呈现JSON

Question

如何像http://jsonviewer.stack.hu/使用angular JS那样以树状的方式呈现JSON？

Answer 1

你感兴趣的技术是“递归指令”。如果您还不知道如何编写指令，那么您应该首先开始学习它。官方的Angular JS文档在解释指令Creating Custom Directives方面做得更好

一旦您知道如何编写自定义指令，您就可以学习递归指令。我发现谷歌群组这个帖子很有帮助：Recursive directives。特别是，我发现Mark Lagendijk在该线程中的递归助手服务非常有用。

一定要检查那里的示例。下面是一些相关的示例：

plnkr

jsfiddle

在上面的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); 
                });
            };
        }
    };
});

上面的一些代码被我上面提到的Mark Lagendijk的Recursion Helper服务抽象出来了。

最后，我实现了angular-json-human，，它将JSON呈现在嵌套表结构中，这使得人们更容易阅读。您可以根据需要对其进行修改。演示是here，存储库是here

希望这能有所帮助！

Answer 2

我制作了这个Angular指令，以便以一种很好的方式呈现JSON。它在bower中可用：

https://github.com/mohsen1/json-formatter

​

​

Answer 3

我编写了一个函数来在angular-ui-tree组件中显示JSON数据。

关键点如下：

在解析例程中，将当前节点的“JSON字符串”保存在节点本身中，每个“未解析”节点都有这个有效负载和一个“load”函数。

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

然后，当用户单击切换按钮时，您可以调用此函数来解析树中的下一个节点，并将数据绑定到HTML。

可以通过一个示例更清楚地说明：https://jsfiddle.net/MatteoTosato/ghm4z606/