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:

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

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

— Derek
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

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
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
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
  }

}

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
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
source