webentwicklung-frage-antwort-db.com.de

Angular JS rendert JSON in baumähnlichem Format

Wie rendere ich JSON in baumähnlicher Weise wie http://jsonviewer.stack.hu/ verwendet winkliges JS?

15
Bourne

Die Technik, die Sie interessieren, ist ' rekursive Direktive '. Wenn Sie noch nicht wissen, wie man eine Direktive schreibt, sollten Sie sie erst lernen. Das offizielle Angular JS-Dokument wurde viel besser darin erklärt, die Richtlinie zu erklären. Erstellen von benutzerdefinierten Richtlinien

Sobald Sie wissen, wie Sie eine benutzerdefinierte Direktive schreiben, können Sie mehr über die rekursive Direktive erfahren. Ich fand diesen Google Groups-Thread hilfreich: Rekursive Anweisungen . Ich fand insbesondere Mark Lagendijks Rekursions-Hilfsdienst in diesem Thread sehr nützlich.

Schauen Sie sich die Beispiele dort an. Einige relevante Beispiele für Sie sind:

plnkr
jsfiddle

In dem jsfiddle-Beispiel oben sehen Sie Folgendes:

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

Ein Teil des obigen Codes wird von Mark Lagendijks Recursion Helper-Dienst, den ich oben erwähnt habe, abstrahiert.

Zum Schluss habe ich angle-json-human implementiert, wodurch JSON in einer geschachtelten Tabellenstruktur dargestellt wird, was das Lesen für Menschen einfacher macht. Sie können es an Ihre Bedürfnisse anpassen. Die Demo ist hier und das Repo ist hier

Hoffe das hilft!

20
Brian Park

Ich habe diese Angular -Anweisung gemacht, um JSON auf nette Art darzustellen. Es ist in der Laube erhältlich:

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

enter image description here

23
Mohsen

Ich habe eine Funktion geschrieben, um JSON-Daten in der Komponente angle-ui-tree anzuzeigen.

Der Schlüsselpunkt ist folgender:

Behalten Sie in Ihrer Parseroutine den 'JSON-String' des aktuellen Knotens im Knoten selbst bei. Jeder 'nicht geparste' Knoten hat diese Nutzdaten und eine 'load'-Funktion. 

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

Wenn der Benutzer dann auf die Umschaltfläche klickt, können Sie diese Funktion aufrufen, um die nächsten Knoten in der Baumstruktur zu analysieren und die Daten an den HTML-Code zu binden.

Kann mit einem Beispiel klarer sein: https://jsfiddle.net/MatteoTosato/ghm4z606/

0
Matteo Tosato