web-dev-qa-db-ja.com

[Object Object]ではなくJSON表現を画面に表示する方法

私はベータ版でAngularJS 2アプリケーションを作成しています。自分のページにオブジェクトのJSON表現を表示したいのですが、[Object Object]ではなく{key1:value1 ....}が表示されます。

私が使用できるコンポーネントから：

get example() {return JSON.stringify(this.myObject)};

そしてテンプレートの中で：

{{example}}

しかし、もし私がオブジェクトの配列を持っていて、それらのオブジェクトのリストを印刷したいのなら、どうすればそれができますか？

使用方法

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

結果は次のようになります。

  -  [オブジェクトオブジェクト] 
  -  [オブジェクトオブジェクト] 
  -  [オブジェクトオブジェクト] 
  -  [オブジェクトオブジェクト]

等々。それらをJSONとして表示する方法はありますか？

jsonangular
83
foralobo

Webアプリケーションのオブジェクト内にあるものを見たい場合は、コンポーネントHTMLテンプレートでjsonパイプを使用します。次に例を示します。

<li *ngFor="let obj of myArray">{{obj | json}}</li>

テスト済みであり、Angular 4.3.2を使用して有効です

150
Vlado Tesanovic

角パイプを使用できますjson

{{ jsonObject | json }}
48
ganesh kalje

JSONオブジェクトをループ処理するには：Angluar（6.0.0+）では、現在はパイプkeyvalueを提供しています。

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

同様に読んでください

JSONをそのまま表示する

{{ object | json }}
12
Vivek Doshi

ngForを使用しなくても、オブジェクトのコンテンツをJSONとしてダンプできます。例：

オブジェクト

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

マークアップ

<div [innerHTML]="theObject | json"></div>

出力（読みやすくするために美しく見せました。それ以外の場合は単一行で出力されます）

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

私は（JSONView Chrome拡張と同様に）より読みやすいJSONデータを表示するJSONフォーマッタとビューアも発見しました： https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>
9
Alexei

あなたが値を取得することができます2つの方法があります： -

  1. ドット表記法（obj.property）を使用してオブジェクトのプロパティにアクセスします。
  2. Obj ["property"]のようにキー値を渡して、オブジェクトのプロパティにアクセスします。
4
Harkirat Saluja
<li *ngFor="let obj of myArray">{{obj | json}}</li>
3
Jaydeep Kataria

新しい構文で他人の答えを更新する：

<li *ngFor="let obj of myArray">{{obj | json}}</li>
2
anazard

オブジェクトの配列があり、コンポーネントでそれらをデシリアライズしたい場合

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

テンプレートよりも

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>
0
Arash
this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });
0
user11514096