2016-07-09 11 views
1

バックエンド(api)からデータを取得していますが、ビューに表示できません。 私はいくつかのソリューションを試しましたが、うまくいきませんでした。角度2のバックエンドからのJSONデータを表示できません

<ul> 
    <li *ngFor="let item of data"> 
    <h4>{{item.address}}</h4> 
    <h4>{{item.city}}</h4> 
    </li> 
</ul>   

データが下に貼り付けられます。 JSON.stringify()を使用してデータをオブジェクトから文字列に変換し、変数getEventDataに格納しました。このような結果を補間すると、{{getEventData}}は問題なくなりますが、フォーマットできません。ありがとうございます。 あなたは*ngForでデータをレンダリングすることを計画している場合はJSON.stringifyを必要としないAPI

{ 
    "data": [ 
     { 
      "address": "Great 22", 
      "banner_image": null, 
      "city": "Kum", 
      "country": "", 
      "creator_id": 15, 
      "description": "50th congregation", 
      "end_time": "2016-07-05T15:30:00+00:00", 
      "event_id": 5, 
      "is_online": false, 
      "max_tickets_per_user": 1, 
      "show_id": 7, 
      "start_time": "2016-07-05T09:00:00+00:00", 
      "state": "Ash", 
      "title": "Graduation", 
      "venue": "Great Hall" 
     }, 
     { 
      "address": "CCB Auditorium", 
      "banner_image": null, 
      "city": "Kumasi", 
      "country": "hema", 
      "creator_id": 15, 
      "description": "school graduation", 
      "end_time": "2016-07-06T15:30:00+00:00", 
      "event_id": 5, 
      "is_online": false, 
      "max_tickets_per_user": 1, 
      "show_id": 8, 
      "start_time": "2016-07-06T09:00:00+00:00", 
      "state": "hama", 
      "title": "Graduation", 
      "venue": "CCB Auditorium" 
     }, 
     { 
      "address": "Engineering Auditorium", 
      "banner_image": null, 
      "city": "Kumasi", 
      "country": "Ghana", 
      "creator_id": 15, 
      "description": "KNUST graduation for the 50th congregation", 
      "end_time": "2016-07-06T15:30:00+00:00", 
      "event_id": 5, 
      "is_online": false, 
      "max_tickets_per_user": 1, 
      "show_id": 9, 
      "start_time": "2016-07-06T09:00:00+00:00", 
      "state": "Ash", 
      "title": "Graduation", 
      "venue": "Engineering Auditorium" 
     } 
    ] 
} 
+0

は、私はそれが動作するはずだと思います。あなたの 'getEventData'にはこれが入っていますか? – micronyks

+0

'{{data | json}}'を実行し、あなたの質問に値をコピー&ペーストしてください。 – micronyks

+0

yes @ micronyks。補間によって、上記のjsonデータを得る。 – adongo

答えて

1

から

//get request to api 
     this._http.get(this.url + param, {headers:headers}) 
      .map((res:Response) => res.json()) 
      .subscribe(
       data => this.getEventData = JSON.stringify(data), 
       error =>this.logError(error), 
       () => console.log('get request completed sucesfully') 
      ); 

データ:

.subscribe(
    data => this.getEventData = data.data, // note extra .data 
    error => this.logError(error), 
    () => console.log('get request completed succesfully') 
); 
+1

ああそう... +1 ..... – micronyks

+0

'{{getEventData}}'は[オブジェクトオブジェクト]、[オブジェクトオブジェクト]を生成します。コンソールにgetEventDataを記録することによっても出力は次のようになります: 'Array(2)' @dfsq – adongo

+0

それは私のために働いてくれてありがとう。 – adongo

関連する問題