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

100

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

Par exemple, cela prendrait ceci:

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

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

entrez la description de l'image ici

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

<td> {{ record.jsonData | prettyprint }} </td>
javascript json filter angular pipe Derek
la source
1
semble que vous souhaitiez créer un tuyau personnalisé. voici de la documentation: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . essayez-le et si vous rencontrez des problèmes, n'hésitez pas à poster une question plus spécifique
danyamachine

Réponses:

302

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

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

De cette façon, la mise en forme est préservée.

Shane Hsu
la source
Merci c'est parfait!
laurent
5
C'était tellement évident que je vous ai donné un point parce que j'ai honte de le chercher: p
Capy
1
@Shane Hsu, le tuyau json intégré ne fonctionne pas. J'utilise une chaîne pour rendre json jolie. Veuillez passer par ce lien dont j'ai soulevé la question. stackoverflow.com/questions/57405561/…
Venkateswaran R
Il est donc sensible à la casse. :(
Vibhor Dube
Cool. Notez que la mise en forme nécessite <pre>et ne fonctionnera pas avec , par exemple <p>, <span>etc.
Jeppe
21

Je créerais un tuyau personnalisé pour cela:

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

et utilisez-le 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

Thierry Templier
la source
Travaillé! J'avais une chaîne json, pas un objet json, donc je devais juste ajouter cette ligne avant d'appeler JSON.stringify: var jsonObject = JSON.parse (jsonString);
Derek
Syntaxe inattendue, je m'attends à ce que l'utilisation ressemble plus à un tube standard: <div>{{obj | prettyprint }}</div> mais cela a fonctionné!
Paul Gorbas
1
Comme le souligne @ shane-hsu, il existe un jsontuyau intégré , comme dans Angular 1.
David Souther
Votre absence implements PipeTransformaprèsexport class PrettyPrintPipe
MatthiasSommer
1
Pourquoi n'est-ce pas la réponse acceptée? Il répond à la question posée, contrairement à la réponse acceptée
davejoem
4

Comme il s'agit du premier résultat sur Google, permettez-moi d'ajouter un bref résumé:

  • si vous avez seulement besoin d'imprimer JSON sans formatage approprié, le jsontube intégré suggéré par Shane Hsu fonctionne parfaitement:<pre>{{data | json}}</pre>

  • cependant, si vous souhaitez avoir une sortie différente, vous devrez créer votre propre pipe comme l'a suggéré Thierry Templier:

    1. ng g generate pipe prettyjson
    2. dans 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. Enfin, et parce que nous renvoyons du contenu HTML, le tube doit être utilisé à l'intérieur d'une innerHTMLfonction:
<div [innerHTML]="data | prettyjson"></div>
Dlacrème
la source
0

puisque ma variable est liée dans les deux sens avec ngModel, je ne pouvais pas le faire sur html. Je l'ai utilisé côté composant JSON.stringify(displayValue, null, 2) et ça a fait le boulot.

Feng Zhang
la source