Canal angular 2 que transforma o objeto JSON em JSON bem impresso

99

Tentando escrever um canal Angular 2 que pegará uma string de objeto JSON e a retornará bem impressa / formatada para ser exibida ao usuário.

Por exemplo, seria necessário:

{"id": 1, "número": "K3483483344", "estado": "CA", "ativo": verdadeiro}

E retorne algo parecido com isto quando exibido em HTML:

insira a descrição da imagem aqui

Então, na minha opinião, eu poderia ter algo como: 

<td> {{ record.jsonData | prettyprint }} </td>
javascript json filter angular pipe Derek
fonte
1
parece que você deseja criar um tubo personalizado. aqui está alguma documentação: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . experimente e se você tiver problemas,
fique

Respostas:

301

Eu gostaria de adicionar uma maneira ainda mais simples de fazer isso, usando o jsontubo integrado :

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

Dessa forma, a formatação é preservada.

Shane Hsu
fonte
Obrigado, isso é perfeito!
laurent de
5
Era tão óbvio que te dei um ponto porque tenho vergonha de pesquisar: p
Capy
1
@Shane Hsu, o tubo json integrado não está funcionando. Estou usando barbante para deixar o json bonito. Por favor, acesse este link que levantei a questão. stackoverflow.com/questions/57405561/…
Venkateswaran R
Portanto, é sensível a maiúsculas e minúsculas. :(
Vibhor Dube
Legal. Observe que a formatação requer <pre>e não funcionará com <p>, por exemplo <span>
,,
21

Eu criaria um tubo personalizado para isso:

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

e use-o desta forma:

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

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

Thierry Templier
fonte
Funcionou! Eu tinha uma string json, não um objeto json, então só tive que adicionar esta linha antes de chamar JSON.stringify: var jsonObject = JSON.parse (jsonString);
Derek
Sintaxe inesperada, espero que seja mais parecido com um pipe padrão: <div>{{obj | prettyprint }}</div> mas funcionou!
Paul Gorbas
1
Como @ shane-hsu apontou, há um jsontubo embutido , assim como em Angular 1.
David Souther
Seu desaparecimento implements PipeTransformdepoisexport class PrettyPrintPipe
MatthiasSommer
1
Por que esta não é a resposta aceita? Ele responde à pergunta feita, ao contrário da resposta aceita
davejoem
4

Como este é o primeiro resultado no google, deixe-me adicionar um breve resumo:

  • se você só precisa imprimir JSON sem a formatação adequada, o jsonpipe integrado sugerido por Shane Hsu funciona perfeitamente:<pre>{{data | json}}</pre>

  • no entanto, se quiser ter uma saída diferente, você precisará criar seu próprio pipe, conforme sugeriu Thierry Templier:

    1. ng g generate pipe prettyjson
    2. em 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, e como retornamos conteúdo HTML, o pipe deve ser usado dentro de uma innerHTMLfunção:
<div [innerHTML]="data | prettyjson"></div>
Dlacreme
fonte
0

uma vez que minha variável tem vínculo bidirecional com ngModel, eu não poderia fazer isso em html. Usei no lado do componente JSON.stringify(displayValue, null, 2) e funcionou.

Feng Zhang
fonte