JSON-String-Ausgabe im AngularJS-Format

Lesezeit: 4 Minuten

Benutzer-Avatar
Amenoire

Ich habe eine AngularJS-Anwendung, die Daten aus Eingaben sammelt und ein Modell in eine Zeichenfolge umwandelt JSON.stringify() und lässt einen Benutzer dieses Modell so bearbeiten, dass Eingabefelder aktualisiert werden, wenn die <textarea> Element aktualisiert und umgekehrt. Eine Art Zwei-Wege-Bindung 🙂

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

Geben Sie hier die Bildbeschreibung ein

Und nicht so, 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.

Vielen Dank.

PS Ich denke, das sollte eine Art Richtlinie oder ein benutzerdefinierter Filter sein. Die Daten selbst SOLLTEN NICHT geändert werden, nur die Ausgabe.

  • Können Sie das versuchen – Drücken Sie im Textbereich die Eingabetaste und formatieren Sie die resultierende Zeichenfolge wie gewünscht. Dann in deiner $watch (basierend auf der Antwort auf die vorherige Frage) über das Textarea-Modell, können Sie a console.log() und sehen Sie, welchen Wert Sie in der Zeichenfolge für die Eingabetaste erhalten – ich denke, es ist “/ n”.

    – callmekatootie

    1. April 2014 um 12:29 Uhr

  • Auf dieser Grundlage kann ich vorschlagen, wie Sie den Text formatieren können

    – callmekatootie

    1. April 2014 um 12:29 Uhr

  • {“anchorPosition”:”1″, “difficulty”:”1″, “includeInSequence”:”1″, “questionCount”:”1″}

    – Amenoire

    1. April 2014 um 12:35 Uhr

  • Grundsätzlich hat sich nichts geändert, nachdem String formatiert wurde.

    – Amenoire

    1. April 2014 um 12:36 Uhr

  • Siehe Antworten unten – helfen sie?

    – callmekatootie

    1. April 2014 um 12:37 Uhr

Benutzer-Avatar
Ivarni

Angular hat eine eingebaute filter zum Zeigen JSON

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

Beachten Sie die Verwendung von pre-tag, um Leerzeichen und Zeilenumbrüche zu sparen

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="[email protected]" data-semver="1.2.15" src="https://code.angularjs.org/1.2.15/angular.js"></script>
  </head>

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

</html>

Es gibt auch eine angular.toJson Methode, aber ich habe damit nicht herumgespielt (Dokumente)

  • Ja, das kenne ich schon. Aber ich kann diesen Filter nicht machen, weil der Textbereich selbst ein Modell ist.

    – Amenoire

    1. April 2014 um 12:37 Uhr

  • Das ist so einfach und doch so nützlich 😀

    – Jamie Street

    18. Juni 2015 um 9:47 Uhr

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

    – Amenoire

    26. August 2015 um 12:14 Uhr

  • Beachten Sie, dass Ihre <pre> Tag sollte nicht haben white-space Eigenschaft gesetzt auf normal oder no-wrap. Andernfalls würde Ihr JSON nicht wie gewünscht eingerückt.

    – falconepl

    4. September 2015 um 7:52 Uhr

  • Ich hatte Probleme, aber ich kam ohne

     aus.... Ich habe diese Antwort gesehen und behoben .... danke!!
    – Lukas
    4. Mai 2016 um 14:01 Uhr

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

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

Parameter

  • Wert Der Wert, der in eine JSON-Zeichenfolge konvertiert werden soll.
  • Ersatz Wenn es sich um eine Funktion handelt, transformiert es Werte und Eigenschaften, die beim Stringifizieren gefunden wurden; Wenn es sich um ein Array handelt, gibt es den Satz von Eigenschaften an, die in Objekten in der letzten Zeichenfolge enthalten sind. Eine ausführliche Beschreibung der Ersetzungsfunktion finden Sie im Artikel des Javascript-Leitfadens Using native JSON.
  • Platz Bewirkt, dass die resultierende Zeichenfolge hübsch gedruckt wird.

Zum Beispiel:

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

wird Ihnen folgendes Ergebnis liefern:

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

  • Beachten Sie, dass dadurch die erhalten bleibt $$hashKey Die Eigenschaft Winkel wird für die interne Modellverfolgung verwendet

    – PixnBits

    20. August 2014 um 19:40 Uhr

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

    – HerrE

    5. April 2016 um 22:14 Uhr

  • @ Lukasz, kann ich den $$Hashkey vermeiden?

    – Md Aslam

    9. Januar 2019 um 13:56 Uhr

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

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

Geben Sie hier die Bildbeschreibung ein

In Ergänzung zu eckig json Filter bereits erwähnt, gibt es auch die eckig toJson() Funktion.

angular.toJson(obj, pretty);

Mit dem zweiten Parameter dieser Funktion können Sie den hübschen Druck einschalten und die Anzahl der zu verwendenden Leerzeichen festlegen.

Wenn der Wert auf „true“ gesetzt ist, enthält die JSON-Ausgabe Zeilenumbrüche und Leerzeichen. Bei einer Ganzzahl enthält die JSON-Ausgabe entsprechend viele Leerzeichen pro Einrückung.

(Standard: 2)

Ich denke, Sie möchten den JSON-Text bearbeiten. Dann können Sie den Weg von ivarni verwenden:

{{data | json}}

und fügen Sie ein Additionsattribut hinzu

 editable

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

Hoffe das kann dir helfen.

Benutzer-Avatar
Najan

Wenn Sie den JSON formatieren und auch eine Syntaxhervorhebung vornehmen möchten, können Sie die ng-prettyjson Richtlinie. Siehe das npm-Paket.

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

1180110cookie-checkJSON-String-Ausgabe im AngularJS-Format

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy