Potok kątowy 2, który przekształca obiekt JSON w ładnie wydrukowany JSON

102

Próba napisania potoku Angular 2, który pobierze ciąg obiektu JSON i zwróci go ładnie wydrukowany / sformatowany do wyświetlenia użytkownikowi.

Na przykład zajmie to:

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

I zwróć coś, co wygląda tak, gdy jest wyświetlane w HTML:

wprowadź opis obrazu tutaj

Więc moim zdaniem mógłbym mieć coś takiego: 

<td> {{ record.jsonData | prettyprint }} </td>
javascript json filter angular pipe Derek
źródło
1
wygląda na to, że chcesz utworzyć niestandardową rurę. oto dokumentacja: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . wypróbuj to, a jeśli napotkasz problemy,
napisz

Odpowiedzi:

304

Chciałbym dodać jeszcze prostszy sposób, aby to zrobić, używając wbudowanej jsonrury:

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

W ten sposób formatowanie zostaje zachowane.

Shane Hsu
źródło
Dzięki, to jest idealne!
laurent
5
Było tak oczywiste, że przyznałem Ci punkt, bo wstydzę się go szukać: p
Capy
1
@Shane Hsu, wbudowany potok JSON nie działa. Używam ciągu, aby uczynić json ładnym. Prosimy przejść przez ten link, który zadałem pytanie. stackoverflow.com/questions/57405561/…
Venkateswaran R
Dlatego rozróżniana jest wielkość liter. :(
Vibhor Dube
1
Chłodny. Należy pamiętać, że formatowanie wymaga <pre>i nie będzie działać z np <p>, <span>itp
Jeppe
21

Stworzyłbym do tego niestandardową rurę:

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

i użyj go w ten sposób:

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

Zobacz ten stackblitz: https://stackblitz.com/edit/angular-prettyprint

Thierry Templier
źródło
Pracowałem! Miałem ciąg json, a nie obiekt json, więc po prostu musiałem dodać tę linię przed wywołaniem JSON.stringify: var jsonObject = JSON.parse (jsonString);
Derek
Nieoczekiwana składnia, spodziewam się, że użycie będzie bardziej podobne do używania standardowego potoku: <div>{{obj | prettyprint }}</div> ale zadziałało!
Paul Gorbas
1
Jak wskazuje @ shane-hsu, jest wbudowana jsonrura, tak jak w Angular 1.
David Souther
Twoja zaginięcie implements PipeTransformpoexport class PrettyPrintPipe
MatthiasSommer
1
Dlaczego nie jest to akceptowana odpowiedź? Odpowiada na zadane pytanie, w przeciwieństwie do zaakceptowanej odpowiedzi
davejoem
4

Ponieważ jest to pierwszy wynik w Google, pozwolę sobie podsumować:

  • jeśli potrzebujesz tylko wydrukować JSON bez odpowiedniego formatowania, wbudowany jsonpotok sugerowany przez Shane'a Hsu działa idealnie:<pre>{{data | json}}</pre>

  • jeśli jednak chcesz mieć inne wyjście, musisz utworzyć własną potokę, zgodnie z sugestią Thierry Templier:

    1. ng g generate pipe prettyjson
    2. w 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
  }

}
  1. Wreszcie, ponieważ zwracamy treść HTML, potok musi być używany wewnątrz innerHTMLfunkcji:
<div [innerHTML]="data | prettyjson"></div>
Dlacreme
źródło
0

ponieważ moja zmienna jest dwukierunkowo powiązana z ngModel, nie mogłem tego zrobić w html. Użyłem po stronie komponentów JSON.stringify(displayValue, null, 2) i spełniło to zadanie.

Feng Zhang
źródło