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:

ingrese la descripción de la imagen aquí

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

Respuestas:

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
  }

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