Angular JS отображает JSON в виде дерева

Ответ 1

Техника, которая вас интересует, - это рекурсивная директива. Если вы еще не знаете, как написать директиву, тогда вы должны начать изучать ее в первую очередь. Официальный Angular JS doc намного лучше объяснил директиву Создание пользовательских директив

Как только вы знаете, как писать настраиваемую директиву, вы можете узнать о рекурсивной директиве. Я нашел этот раздел групп Google полезным: Рекурсивные директивы. В частности, я нашел службу поддержки рекурсии 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, о которой я упоминал выше.

Наконец, я реализовал angular -json-human, который отображает JSON во вложенной структуре таблицы, что облегчает чтение человеком. Вы можете изменить его в соответствии с вашими потребностями. Демо здесь, а репо здесь

Надеюсь, это поможет!

Ответ 2

Я разработал эту директиву Angular для рендеринга JSON. Он доступен в беседке:

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

Ответ 3

Я написал функцию для отображения данных JSON в компоненте angular -ui-tree.

Ключевым моментом является следующее:

В вашей процедуре синтаксического анализа сохраните строку "JSON" текущего node в самом node, каждый "не проанализированный" node имеет эту полезную нагрузку и функцию "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/