Tubo angular 2 que transforma el objeto JSON en JSON bastante impreso

99

Intentando escribir una tubería Angular 2 que tomará una cadena de objeto JSON y la devolverá impresa / formateada para mostrarla al usuario.

Por ejemplo, tomaría esto:

{"id": 1, "número": "K3483483344", "estado": "CA", "activo": verdadero}

Y devuelve algo que se parece a esto cuando se muestra en HTML:

Entonces, en mi opinión, podría tener algo como:

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

— Derek
fuente

1

parece que desea crear una tubería personalizada. aquí hay algo de documentación: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes .

— Pruébelo

301

Me gustaría agregar una forma aún más simple de hacer esto, usando la jsontubería incorporada :

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

De esta forma, se conserva el formato.

— Shane Hsu
fuente

Gracias esto es perfecto!

— Laurent

5

Fue tan obvio que le di un punto porque me da vergüenza buscarlo: p

— Capy

1

@Shane Hsu, la tubería json incorporada no funciona. Estoy usando una cadena para hacer que json sea bonito. Por favor revise este enlace que planteé la pregunta. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Entonces es sensible a mayúsculas y minúsculas. :(

— Vibhor Dube

Frio. Tenga en cuenta que el formateo requiere <pre>y no funcionará con <p>, por ejemplo <span>

— ,,

21

Crearía una tubería personalizada para esto:

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

y utilícelo de esta manera:

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

Vea este stackblitz: https://stackblitz.com/edit/angular-prettyprint

— Thierry Templier
fuente

¡Trabajó! Tenía una cadena json, no un objeto json, así que solo tenía que agregar esta línea antes de llamar a JSON.stringify: var jsonObject = JSON.parse (jsonString);

— Derek

Sintaxis inesperada, espero que sea más como usar una tubería estándar: ¡ <div>{{obj | prettyprint }}</div> pero funcionó!

— Paul Gorbas

1

Como señala @ shane-hsu, hay una jsontubería incorporada , como en Angular 1.

— David Souther

Tu desaparecido implements PipeTransformdespuésexport class PrettyPrintPipe

— MatthiasSommer

1

¿Por qué no es esta la respuesta aceptada? Responde a la pregunta formulada, a diferencia de la respuesta aceptada

— davejoem

4

Como este es el primer resultado en Google, permítanme agregar un resumen rápido:

si solo necesita imprimir JSON sin el formato adecuado, la jsontubería incorporada sugerida por Shane Hsu funciona perfectamente:<pre>{{data | json}}</pre>
sin embargo, si desea tener una salida diferente, deberá crear su propia tubería como sugirió Thierry Templier:
1. ng g generate pipe prettyjson
2. en 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
  }

}

Finalmente, y debido a que devolvemos contenido HTML, la tubería debe usarse dentro de una innerHTMLfunción:

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

— Dlacreme
fuente

0

dado que mi variable está enlazada bidireccionalmente con ngModel, no pude hacerlo en html. Lo usé en el lado de los componentes JSON.stringify(displayValue, null, 2) e hizo el trabajo.

— Feng Zhang
fuente