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.