Pipa sudut 2 yang mengubah objek JSON menjadi JSON yang dicetak cantik

102

Mencoba menulis pipa Angular 2 yang akan mengambil string objek JSON dan mengembalikannya dengan cukup tercetak / diformat untuk ditampilkan kepada pengguna.

Misalnya, ini akan mengambil ini:

{"id": 1, "number": "K3483483344", "state": "CA", "active": true}

Dan kembalikan sesuatu yang terlihat seperti ini saat ditampilkan dalam HTML:

Jadi dalam pandangan saya, saya bisa memiliki sesuatu seperti:

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

— Derek
sumber

1

Sepertinya Anda ingin membuat pipa khusus. berikut beberapa dokumentasinya: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . cobalah dan jika Anda mengalami masalah, silakan kirim pertanyaan yang lebih spesifik

— danyamachine

304

Saya ingin menambahkan cara yang lebih sederhana untuk melakukan ini, dengan menggunakan jsonpipa bawaan:

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

Dengan cara ini, pemformatan dipertahankan.

— Shane Hsu
sumber

Terima kasih, ini sempurna!

— laurent

5

Sangat jelas bahwa saya memberi Anda satu poin karena saya malu untuk mencarinya: p

— Capy

1

@Shane Hsu, pipa json built-in tidak berfungsi. Saya menggunakan string untuk membuat json cantik. Silakan buka tautan ini yang saya ajukan pertanyaan. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Jadi peka huruf besar kecil. :(

— Vibhor Dube

1

Keren. Perhatikan bahwa pemformatan memerlukan <pre>dan tidak akan berfungsi dengan mis <p>. <span>, Dll.

— Jeppe

21

Saya akan membuat pipa khusus untuk ini:

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

dan gunakan dengan cara ini:

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

Lihat stackblitz ini: https://stackblitz.com/edit/angular-prettyprint

— Thierry Templier
sumber

Bekerja! Saya memiliki string json, bukan objek json, jadi saya hanya perlu menambahkan baris ini sebelum memanggil JSON.stringify: var jsonObject = JSON.parse (jsonString);

— Derek

Sintaks tak terduga, saya mengharapkan penggunaan lebih seperti menggunakan pipa standar: <div>{{obj | prettyprint }}</div> tetapi berhasil!

— Paul Gorbas

1

Seperti yang ditunjukkan @ shane-hsu, ada jsonpipa built-in , seperti yang ada di Angular 1.

— David Souther

Anda hilang implements PipeTransformsetelahexport class PrettyPrintPipe

— MatthiasSommer

1

Mengapa ini bukan jawaban yang diterima? Ini menjawab pertanyaan yang diajukan, tidak seperti jawaban yang diterima

— davejoem

4

Karena ini adalah hasil pertama di google, izinkan saya menambahkan ringkasan singkat:

jika Anda hanya perlu mencetak JSON tanpa pemformatan yang tepat, jsonpipa bawaan yang disarankan oleh Shane Hsu berfungsi dengan sempurna:<pre>{{data | json}}</pre>
namun, jika Anda ingin mendapatkan keluaran yang berbeda, Anda perlu membuat pipa Anda sendiri seperti yang disarankan Thierry Templier:
1. ng g generate pipe prettyjson
2. di 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
  }

}

Terakhir, dan karena kami mengembalikan konten HTML, pipa harus digunakan di dalam innerHTMLfungsi:

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

— Dlacreme
sumber

0

karena variabel saya terikat dua arah dengan ngModel, saya tidak dapat melakukannya di html. Saya menggunakan di sisi komponen JSON.stringify(displayValue, null, 2) dan itu berhasil.

— Feng Zhang
sumber