JSON nesnesini güzel yazdırılmış JSON'a dönüştüren açısal 2 boru

105

Bir JSON nesne dizesi alacak ve kullanıcıya göstermesi için oldukça basılmış / biçimlendirilmiş olarak döndürecek bir Angular 2 borusu yazmaya çalışıyorum.

Örneğin, şunu alır:

{"id": 1, "numara": "K3483483344", "durum": "CA", "etkin": doğru}

HTML'de görüntülendiğinde buna benzer bir şey döndürün:

Yani benim görüşüme göre şöyle bir şeye sahip olabilirim:

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

— Derek.
kaynak

1

özel bir boru oluşturmak istediğinize benziyor. işte bazı belgeler: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . deneyin ve sorunla karşılaşırsanız daha spesifik bir soru göndermekten çekinmeyin

— danyamachine

312

Yerleşik jsonboruyu kullanarak bunu yapmanın daha da basit bir yolunu eklemek istiyorum :

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

Bu şekilde biçimlendirme korunur.

— Shane Hsu
kaynak

Teşekkürler, bu mükemmel!

— laurent

5

O kadar açıktı ki size bir nokta verdim çünkü araştırmaktan utanıyorum: p

— Capy

1

@Shane Hsu, yerleşik json borusu çalışmıyor. JSON'u güzelleştirmek için string kullanıyorum. Lütfen soru sorduğum bu bağlantıyı gözden geçirin. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Dolayısıyla büyük / küçük harfe duyarlıdır. :(

— Vibhor Dube

1

Güzel. Not biçimlendirme gerektirir <pre>ve örneğin işe yaramaz <p>, <span>vb

— Jeppe

22

Bunun için özel bir boru oluşturardım:

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

ve şu şekilde kullanın:

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

Bu stackblitz'e bakın: https://stackblitz.com/edit/angular-prettyprint

— Thierry Templier
kaynak

Çalıştı! Bir json dizgem vardı, json nesnesi değil, bu yüzden JSON.stringify'ı çağırmadan önce bu satırı eklemem gerekiyordu: var jsonObject = JSON.parse (jsonString);

— Derek

Beklenmedik sözdizimi, kullanımın standart bir boru kullanmaya benzemesini bekliyorum: <div>{{obj | prettyprint }}</div> ama işe yaradı!

— Paul Gorbas

1

@ Shane-hsu'nun işaret ettiği jsongibi, Angular 1'de olduğu gibi yerleşik bir boru var.

— David Souther

Sizin eksik implements PipeTransformsonraexport class PrettyPrintPipe

— MatthiasSommer

1

Neden bu kabul edilen cevaplayıcı değil? Kabul edilen cevabın aksine sorulan soruyu cevaplıyor

— davejoem

4

Bu google'daki ilk sonuç olduğu için hızlı bir özet ekleyeyim:

JSON'u doğru biçimlendirme olmadan yazdırmanız gerekiyorsa, jsonShane Hsu tarafından önerilen yerleşik boru mükemmel çalışır:<pre>{{data | json}}</pre>
ancak, farklı bir çıktı elde etmek istiyorsanız, Thierry Templier'in önerdiği gibi kendi borunuzu oluşturmanız gerekecektir:
1. ng g generate pipe prettyjson
2. prettyjson.pipe.ts içinde:

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
  }

}

Son olarak ve HTML içeriği döndürdüğümüz için, boru bir innerHTMLişlev içinde kullanılmalıdır :

<div [innerHTML]="data | prettyjson"></div>

— Dlacreme
kaynak

0

Değişkenim ngModel ile iki yönlü bağlantılı olduğu için html üzerinde yapamadım. Bileşen tarafında kullandım JSON.stringify(displayValue, null, 2) ve işi yaptı.

— Feng Zhang
kaynak