Angular 2-Pipe, die das JSON-Objekt in hübsch gedrucktes JSON umwandelt

97

Beim Versuch, eine Angular 2-Pipe zu schreiben, die eine JSON-Objektzeichenfolge verwendet und diese hübsch gedruckt / formatiert zurückgibt, um sie dem Benutzer anzuzeigen.

Zum Beispiel würde es dies erfordern:

{"id": 1, "number": "K3483483344", "state": "CA", "active": true}

Und geben Sie etwas zurück, das so aussieht, wenn es in HTML angezeigt wird:

Meiner Ansicht nach könnte ich also etwas haben wie:

<td> {{ record.jsonData | prettyprint }} </td>

— Derek
quelle

1

Sieht so aus, als ob Sie eine benutzerdefinierte Pipe erstellen möchten. Hier einige Dokumentationen: angle.io/docs/ts/latest/guide/pipes.html#!#custom-pipes .

— Probieren

298

Ich möchte eine noch einfachere Möglichkeit hinzufügen, dies mithilfe der eingebauten jsonPipe zu tun :

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

Auf diese Weise bleibt die Formatierung erhalten.

— Shane Hsu
quelle

Danke das ist perfekt!

— Laurent

5

War so offensichtlich, dass ich Ihnen einen Punkt gegeben habe, weil ich mich schäme, ihn zu durchsuchen: p

— Capy

1

@ Shane Hsu, eingebaute JSON-Pipe funktioniert nicht. Ich benutze String, um Json hübsch zu machen. Bitte gehen Sie durch diesen Link, den ich Frage aufgeworfen habe. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Es wird also zwischen Groß- und Kleinschreibung unterschieden. :(

— Vibhor Dube

21

Ich würde eine benutzerdefinierte Pipe dafür erstellen:

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(' ', '&nbsp;')
      .replace('\n', '<br/>');
  }
}

und benutze es so:

@Component({
  selector: 'my-app',
  template: `
    <div [innerHTML]="obj | prettyprint"></div>
  `,
  pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
  obj = {
    test: 'testttt',
    name: 'nameeee'
  }
}

Siehe diesen Stackblitz: https://stackblitz.com/edit/angular-prettyprint

— Thierry Templier
quelle

Hat funktioniert! Ich hatte eine JSON-Zeichenfolge, kein JSON-Objekt, daher musste ich diese Zeile nur hinzufügen, bevor ich JSON.stringify aufrief: var jsonObject = JSON.parse (jsonString);

— Derek

Unerwartete Syntax, ich erwarte, dass die Verwendung eher einer Standardpipe ähnelt: <div>{{obj | prettyprint }}</div> aber es hat funktioniert!

— Paul Gorbas

1

Wie @ shane-hsu betont, gibt es ein eingebautes jsonRohr, wie es in Angular 1 gibt.

— David Souther

Ihr vermisst implements PipeTransformnachexport class PrettyPrintPipe

— MatthiasSommer

1

Warum ist dies nicht der akzeptierte Anser? Es beantwortet die gestellte Frage, im Gegensatz zu der akzeptierten Antwort

— Davejoem

4

Da dies das erste Ergebnis bei Google ist, möchte ich eine kurze Zusammenfassung hinzufügen:

Wenn Sie JSON nur ohne ordnungsgemäße Formatierung drucken müssen, jsonfunktioniert die von Shane Hsu vorgeschlagene integrierte Pipe einwandfrei:<pre>{{data | json}}</pre>
Wenn Sie jedoch eine andere Ausgabe haben möchten, müssen Sie Ihre eigene Pipe erstellen, wie von Thierry Templier vorgeschlagen:
1. ng g generate pipe prettyjson
2. in prettyjson.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'prettyjson'
})
export class PrettyjsonPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return JSON.stringify(value, null, 2)
    .replace(/ /g, '&nbsp;') // note the usage of `/ /g` instead of `' '` in order to replace all occurences
    .replace(/\n/g, '<br/>'); // same here
  }

}

Schließlich und weil wir HTML-Inhalte zurückgeben, muss die Pipe innerhalb einer innerHTMLFunktion verwendet werden:

<div [innerHTML]="data | prettyjson"></div>

— Dlacreme
quelle

0

Da meine Variable in beide Richtungen mit ngModel verbunden ist, konnte ich dies unter HTML nicht tun. Ich habe auf der Komponentenseite verwendet JSON.stringify(displayValue, null, 2) und es hat den Job gemacht.

— Feng Zhang
quelle