web-dev-qa-db-ja.com

Angular 4 HTTP GetリクエストからJSONデータを表示

HTTP Angularサーバーに接続しているシンプルなREST 4アプリケーションがあり、このサーバーは単純にJSONペイロードを返しているため、このJSONペイロードを表示したいブラウザにあるように、これは私のmakeRequest TypeScript関数です。

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-simple-http',
  templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
  data: string;
  loading: boolean;

  constructor(private http: Http) {
  }

  ngOnInit() {
  }

  makeRequest(): void {
    this.loading = true;
    this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {
      this.data = res.json();
      this.loading = false;
    });
  }
}

http://jsonplaceholder.typicode.com/posts/1 を呼び出すと、次のJSONが返されます。

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

これをHTMLコンポーネントに次のように表示します。

<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>Data Obtained is: {{ data }}</pre>

しかし、ブラウザでは、これが表示されます。

enter image description here

JSONをそのまま表示するにはどうすればよいですか？

jsonangularresthttp
9
sparkr

json pipe を使用できます。テンプレートで：

<pre>Data Obtained is: {{ data | json }}</pre>

また、dataプロパティのタイプをanyではなくstringに変更する必要があります。

20
Andrei Matracaru

次の2つのオプションがあります。

  • 組み込みのパイプJsonPipeを使用します（_this.data_はany型でなければなりません）：

    _<pre>Data Obtained is: {{ data | json }}</pre>_

  • JSON文字列を手動で取得します。

    this.data = JSON.stringify(res.json()); //data is a string :)

    または

    <pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>

テンプレートの値は.toString()メソッドを呼び出すことで表示されるため、基本オブジェクト（_{key: value}_のようなもの）は_[object Object]_を表示するだけであることを理解する必要があります

ここに working demo があり、app.tsファイル、ajax呼び出し、jsonパイプを含むテンプレートがあることを確認します。

5
Pablo Lozano