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:

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

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

— 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

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
  }

}

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