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:

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

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

— 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

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
  }

}

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