javascript - que - json stringify angular 4

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

Question

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

Por ejemplo, tomaría esto:

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

Y devuelve algo que se ve así cuando se muestra en HTML:

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

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

Answer 1

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('' '', '' '')
.replace(''/n'', ''<br/>'');
}
}

y úsalo 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

Answer 2

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

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

De esta manera, se conserva el formato.