web-dev-qa-db-fra.com

Angular JS rendu JSON sous forme d'arborescence

Comment rendre JSON sous forme d'arborescence, exactement comme http://jsonviewer.stack.hu/ utilise-t-il JS angulaire?

javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
15
Bourne

La technique qui vous intéresse est 'directive récursive} _'. Si vous ne savez pas encore comment écrire une directive, commencez par l’apprendre. Le document officiel Angular JS a beaucoup mieux expliqué la directive Création de directives personnalisées

Une fois que vous savez écrire une directive personnalisée, vous pouvez en apprendre davantage sur la directive récursive. J'ai trouvé ce fil Google Groupes utile: Directives récursives . En particulier, j’ai trouvé le service d’aide à la récursion de Mark Lagendijk} très utile dans ce fil.

Assurez-vous de vérifier les exemples ici. Quelques exemples pertinents pour vous sont:

plnkr
jsfiddle

Dans l'exemple de jsfiddle ci-dessus, regardez:

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

Une partie du code ci-dessus est extraite par le service Recursion Helper de Mark Lagendijk que j'ai mentionné ci-dessus.

Enfin, j'ai implémenté angular-json-human, qui restitue JSON dans une structure de table imbriquée, ce qui facilite la lecture par les utilisateurs. Vous pouvez le modifier pour répondre à vos besoins. La démo est ici et le dépôt est ici

J'espère que cela t'aides!

20
Brian Park

J'ai créé cette directive Angular pour rendre JSON de manière agréable. Il est disponible dans Bower:

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

enter image description here

23
Mohsen

J'ai écrit une fonction pour afficher des données JSON dans le composant angular-ui-tree.

Le point clé est le suivant:

Dans votre routine d'analyse, conservez la "chaîne JSON" du nœud actuel dans le nœud lui-même. Chaque nœud "non analysé" a cette charge utile et une fonction "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;
}

Ensuite, lorsque l'utilisateur clique sur le bouton bascule, vous pouvez appeler cette fonction pour analyser les nœuds suivants dans l'arborescence et lier les données au code HTML.

Peut être plus clair avec un exemple: https://jsfiddle.net/MatteoTosato/ghm4z606/

0
Matteo Tosato