Tube 2 angulaire qui transforme un objet JSON en un JSON joliment imprimé

Question

Essayer d'écrire Angulaire à 2 pipe qui va prendre en paramètre un objet JSON chaîne et de le retourner joli imprimé/mise en forme pour afficher à l'utilisateur.

Par exemple, il faudrait de ce:

{ "id": 1, "nombre": "K3483483344", "état": "CA", "active": true }

Et le retour de quelque chose qui ressemble à ceci lors de l'affichage en HTML:

Donc à mon avis je pourrais avoir quelque chose comme:

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

Answer 1

Je voudrais ajouter un moyen encore plus simple de faire cela, en utilisant le tube intégré json :

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

De cette façon, le formatage est préservé.

Answer 2

Je créerais un tuyau personnalisé pour ceci:

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

et l'utiliser de cette façon:

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

Voir ce stackblitz: https://stackblitz.com/edit/angular-prettyprint