JSONオブジェクトをきれいに印刷されたJSONに変換するAngular 2パイプ

99

JSONオブジェクト文字列を取得し、pretty-printed / formattedで返してユーザーに表示するAngular 2パイプを作成しようとしています。

たとえば、次のようになります。

{"id"：1、 "number"： "K3483483344"、 "state"： "CA"、 "active"：true}

そして、HTMLで表示すると、次のようなものを返します。

だから私の見解では、私は次のようなものを持つことができます：

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

— デレク
ソース

1

カスタムパイプを作成するように見えます。ここにいくつかのドキュメントがあります：angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes。それを試してみると、あなたが問題に実行する場合、より具体的な質問投稿気軽に

— danyamachine

301

組み込みjsonパイプを使用して、これを行うさらに簡単な方法を追加したいと思います。

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

このようにして、フォーマットが保持されます。

— シェーン・スー
ソース

ありがとう、これは完璧です！

— ローレント

5

私はそれを検索することを恥ずかしいので私はあなたにポイントを与えたほど明白だった：p

— Capy

1

@Shane Hsu、組み込みのjsonパイプが機能していません。私はjsonをきれいにするために文字列を使用しています。親切に私が質問をしたこのリンクを通過します。stackoverflow.com/questions/57405561/...

— Venkateswaran R

したがって、大文字と小文字が区別されます。:(

— Vibhor Dube

涼しい。注フォーマットが必要であること<pre>と、例えばでは動作しません<p>、<span>など

— ジャップを

21

このためのカスタムパイプを作成します。

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

次のように使用します。

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

このStackblitzを参照してください：https ://stackblitz.com/edit/angular-prettyprint

— ティエリーテンプリエ
ソース

働きました！私はjsonオブジェクトではなくjson文字列を持っていたので、JSON.stringifyを呼び出す前にこの行を追加する必要がありました：var jsonObject = JSON.parse（jsonString）;

— Derek

予期しない構文、私は使用が標準のパイプを使用することに似ていると期待しています<div>{{obj | prettyprint }}</div> が、それはうまくいきました！

— ポールゴルバス

1

@シェーン-HSUが指摘するように、ビルトインありjsonアンギュラ1でありとしてパイプは、

— デヴィッド・サウザー

あなたは行方不明implements PipeTransform後export class PrettyPrintPipe

— MatthiasSommer

1

なぜこれは受け入れられたアンサーではないのですか？受け入れられた回答とは異なり、質問に答えます

— davejoem

4

これはグーグルでの最初の結果なので、簡単な要約を追加しましょう：

適切なフォーマットなしでJSONを印刷するだけの場合jsonは、Shane Hsuによって提案された組み込みパイプが完全に機能します。<pre>{{data | json}}</pre>
ただし、別の出力が必要な場合は、Thierry Templierが提案したように、独自のパイプを作成する必要があります。
1. ng g generate pipe prettyjson
2. 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
  }

}

最後に、HTMLコンテンツを返すため、innerHTML関数内でパイプを使用する必要があります。

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

— Dlacreme
ソース

0

私の変数はngModelで双方向にバインドされているため、htmlでは実行できませんでした。私はコンポーネント側で使用しJSON.stringify(displayValue, null, 2) 、それは仕事をしました。

— 風水張
ソース