Angular 2 canal qui transforme un objet JSON en JSON joliment imprimé

Question

Essayer d'écrire un canal Angular 2 qui prendra une chaîne d'objet JSON et la retournera joliment imprimée/formatée pour l'afficher à l'utilisateur.

Par exemple, cela prendrait ceci:

{"id": 1, "numéro": "K3483483344", "état": "CA", "actif": vrai}

Et retourne quelque chose qui ressemble à ceci lorsqu'il est affiché en HTML:

Donc, à mon avis, je pourrais avoir quelque chose comme:

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

Answer 1

J'aimerais ajouter un moyen encore plus simple de le faire, en utilisant le tube json intégré:

<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