Tubo angolare 2 che trasforma l'oggetto JSON in un JSON piuttosto stampato

100

Tentativo di scrivere una pipe Angular 2 che prenderà una stringa di oggetto JSON e la restituirà abbastanza stampata / formattata per la visualizzazione all'utente.

Ad esempio, ci vorrebbe questo:

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

E restituisci qualcosa che assomigli a questo quando viene visualizzato in HTML:

Quindi a mio avviso potrei avere qualcosa del tipo:

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

— Derek
fonte

1

sembra che tu voglia creare una pipe personalizzata. ecco della documentazione: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . provalo e se

— incontri

302

Vorrei aggiungere un modo ancora più semplice per farlo, utilizzando il jsontubo integrato :

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

In questo modo, la formattazione viene preservata.

— Shane Hsu
fonte

Grazie, è perfetto!

— laurent

5

Era così ovvio che ti ho dato un punto perché mi vergogno di cercarlo: p

— Capy

1

@Shane Hsu, il tubo json integrato non funziona. Sto usando la stringa per rendere carino json. Si prega di passare attraverso questo collegamento che ho sollevato in questione. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Quindi distingue tra maiuscole e minuscole. :(

— Vibhor Dube

Freddo. Nota che la formattazione richiede <pre>e non funziona con es <p>. <span>, Ecc.

— Jeppe

21

Creerei una pipe personalizzata per questo:

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

e usalo in questo modo:

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

Vedi questo stackblitz: https://stackblitz.com/edit/angular-prettyprint

— Thierry Templier
fonte

Lavorato! Avevo una stringa json, non un oggetto json, quindi ho dovuto aggiungere questa riga prima di chiamare JSON.stringify: var jsonObject = JSON.parse (jsonString);

— Derek

Sintassi inaspettata, mi aspetto che l'uso sia più simile all'uso di una pipe standard: <div>{{obj | prettyprint }}</div> ma ha funzionato!

— Paul Gorbas

1

Come sottolinea @ shane-hsu, c'è un jsontubo integrato , come in Angular 1.

— David Souther

La tua scomparsa implements PipeTransformdopoexport class PrettyPrintPipe

— MatthiasSommer

1

Perché questo non è il responso accettato? Risponde alla domanda posta, a differenza della risposta accettata

— davejoem il

4

Poiché questo è il primo risultato su Google, lasciatemi aggiungere un breve riassunto:

se hai solo bisogno di stampare JSON senza una corretta formattazione, il jsontubo integrato suggerito da Shane Hsu funziona perfettamente:<pre>{{data | json}}</pre>
tuttavia, se vuoi avere un output diverso, dovrai creare il tuo pipe come suggerito da Thierry Templier:
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
  }

}

Infine, e poiché restituiamo contenuto HTML, la pipe deve essere utilizzata all'interno di una innerHTMLfunzione:

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

— Dlacreme
fonte

0

poiché la mia variabile è collegata in modo bidirezionale con ngModel, non potrei farlo su html. L'ho usato sul lato dei componenti JSON.stringify(displayValue, null, 2) e ha fatto il lavoro.

— Feng Zhang
fonte