Question

如何像http://jsonviewer.stack.hu/使用angular JS一样在树中呈现JSON？

Answer 1

我已经制作了这个Angular指令，用于以一种很好的方式呈现JSON。它可以在凉亭中使用：

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

enter image description here

Answer 2

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

方面做得更好

一旦您知道如何编写自定义指令，就可以了解递归指令。我发现此Google网上论坛帖子很有用：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 3

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

关键点如下：

在您的解析例程中，保留＆＃39; JSON字符串＆＃39;在节点本身中的当前节点中，每个节点都没有被解析＆＃39;节点有这个有效载荷和一个负载＆＃39;功能。

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/

Angular JS以树状格式呈现JSON

3 个答案: