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

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

Как только вы научитесь писать пользовательскую директиву, вы сможете узнать о рекурсивной директиве. Я нашел эту ветку групп Google полезной: Рекурсивные директивы. В частности, я нашел очень полезным сервис Recursion Helper Марка Лагендейка в этой ветке.

Обязательно ознакомьтесь с примерами там. Некоторые актуальные примеры для вас:

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

Часть приведенного выше кода абстрагируется службой Recursion Helper Марка Лагендейка, о которой я упоминал выше.

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

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

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

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

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

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

В вашей процедуре синтаксического анализа сохраните «строку 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;
}

Затем, когда пользователь нажимает кнопку переключения, вы можете вызвать эту функцию для анализа следующих узлов в дереве и привязки этих данных к HTML.

Может быть более понятно на примере: https://jsfiddle.net/MatteoTosato/ghm4z606/