JSON-String-Ausgabe im AngularJS-Format

92

Ich habe eine AngularJS-Anwendung, die Daten aus Eingaben sammelt, ein Modell mithilfe von in einen String umwandelt JSON.stringify()und es einem Benutzer ermöglicht, dieses Modell so zu bearbeiten, dass Eingabefelder aktualisiert werden, wenn das <textarea>Element aktualisiert wird, und umgekehrt. Eine Art Zwei-Wege-Bindung :)

Das Problem ist, dass der String selbst hässlich aussieht und ich ihn so formatieren möchte:

Geben Sie hier die Bildbeschreibung ein

Und nicht wie es jetzt aussieht:

Geben Sie hier die Bildbeschreibung ein

Irgendwelche Ideen, wie dies erreicht werden kann? Wenn Sie zusätzliche Informationen benötigen, zögern Sie nicht zu fragen. Jede Antwort wird sehr geschätzt und sofort beantwortet.

Danke dir.

PS Ich denke, dies sollte eine Art Direktive oder ein benutzerdefinierter Filter sein. Daten selbst sollten nicht geändert werden, nur die Ausgabe.

— Amenoire
quelle

1

Können Sie dies versuchen? Drücken Sie im Textbereich die Eingabetaste und formatieren Sie die resultierende Zeichenfolge wie gewünscht. Dann können Sie in Ihrem $watch(basierend auf der Antwort auf die vorherige Frage) über dem Textbereichsmodell a ausführen console.log()und sehen, welchen Wert Sie in der Zeichenfolge für die Eingabetaste erhalten - ich denke, es ist "/ n"

— callmekatootie

1

Auf dieser Grundlage kann ich vorschlagen, wie Sie den Text

— formatieren

{"anchorPosition": "1", "Schwierigkeit": "1", "includeInSequence": "1", "questionCount": "1"}

— Amenoire

Grundsätzlich hat sich nach der Formatierung von String nichts geändert.

— Amenoire

Siehe Antworten unten - helfen sie?

— Callmekatootie

65

Sie können einen optionalen Parameter von verwenden JSON.stringify()

JSON.stringify(value[, replacer [, space]])

Parameter

value Der Wert, der in eine JSON-Zeichenfolge konvertiert werden soll.

Ersetzer Wenn eine Funktion Werte und Eigenschaften transformiert, die beim Stringifizieren auftreten; Wenn es sich um ein Array handelt, wird der Satz von Eigenschaften angegeben, die in Objekten in der endgültigen Zeichenfolge enthalten sind. Eine ausführliche Beschreibung der Ersetzungsfunktion finden Sie im JavaScript-Handbuch Artikel Verwenden von nativem JSON.

Leerzeichen Bewirkt, dass die resultierende Zeichenfolge hübsch gedruckt wird.

Beispielsweise:

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

gibt Ihnen folgendes Ergebnis:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

— Lukasz Wiktor
quelle

5

Beachten Sie, dass dadurch die $$hashKeyEigenschaften, die der Winkel für die interne Modellverfolgung verwendet,

— beibehalten werden

1

Sie können auch tun, JSON.stringify(object, null, 2)wobei 2 die Anzahl der Leerzeichen ist.

— MrE

@ Lukasz, kann ich den $$ Hashkey vermeiden?

— Md Aslam

433

Angular verfügt über eine integrierte filterAnzeigeJSON

<pre>{{data | json}}</pre>

Beachten Sie die Verwendung des preTags -tag, um Leerzeichen und Zeilenumbrüche zu erhalten

Demo:

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

Erweitern Sie das Snippet

Es gibt auch eine angular.toJsonMethode, aber damit habe ich nicht herumgespielt ( Docs )

— ivarni
quelle

1

Ja, das weiß ich schon. Ich kann diesen Filter jedoch nicht erstellen, da der Textbereich selbst ein Modell ist.

— Amenoire

Das ist so einfach und doch so nützlich: D

— Jamie Street

2

@ ra170 Sei so freundlich, die ganze Frage sorgfältig zu lesen, nicht nur die Überschrift. Ich habe nach etwas anderem gefragt als nach einem einfachen JSON-Filter.

— Amenoire

Beachten Sie, dass für Ihr <pre>Tag keine white-spaceEigenschaft auf normaloder festgelegt sein sollte no-wrap. Andernfalls würde Ihr JSON nicht wie gewünscht eingerückt.

— Falconepl

3

Ich hatte Probleme, aber ich verzichtete auf <pre> .... Ich sah diese Antwort und habe sie behoben .... danke !!

— Lucas

23

Wenn Sie JSON als HTML rendern möchten und es reduziert / geöffnet werden kann, können Sie diese Direktive verwenden, die ich gerade erstellt habe, um es schön zu rendern:

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

Geben Sie hier die Bildbeschreibung ein

— Mohsen
quelle

11

Zusätzlich zu dem Winkelfilter bereits erwähnt, gibt es auch die Winkelfunktion .jsontoJson()

angular.toJson(obj, pretty);

Mit dem zweiten Parameter dieser Funktion können Sie das hübsche Drucken einschalten und die Anzahl der zu verwendenden Leerzeichen festlegen.

Wenn true festgelegt ist, enthält die JSON-Ausgabe Zeilenumbrüche und Leerzeichen. Bei einer Ganzzahl enthält die JSON-Ausgabe so viele Leerzeichen pro Einzug.

(Standard: 2)

— Daniel Haley
quelle

Meine Seite ist blockiert, wenn ich ihm eine Reihe von 1000 Objekten

— gebe

Youvariable = angle.toJson ...., wie Sie geschrieben haben, sieht es aus wie das Ergebnis in hübsch

— Márcio Rossato

6

Ich denke, Sie möchten verwenden, um den JSON-Text zu bearbeiten. Dann können Sie ivarnis Weg benutzen:

{{Daten | json}}

und fügen Sie ein Zusatzattribut hinzu, das erstellt werden soll

 editierbar


<pre contenteditable="true">{{data | json}}</pre>

Hoffe das kann dir helfen.

— Joy Ge
quelle

2

Wenn Sie den JSON formatieren und auch einige Syntaxhervorhebungen vornehmen möchten, können Sie die ng-prettyjsonDirektive verwenden. Siehe das npm-Paket.

So verwenden Sie es: <pre pretty-json="jsonObject"></pre>

— Nayan
quelle