Ionic 2 Loop Through JSON Restサービスから

Question

私はループしたいと思っています。 Jsonsがある：ここでは

{ 
 
    "0": { 
 
    "id": "678", 
 
    "name": "Several Definitions (VD) - Podcast 104 - ubwg.ch", 
 
    "artist": { 
 
     "id": "282", 
 
     "name": "Unsere Beweggründe (CH)", 
 
     "soundcloudId": 3473917, 
 
     "facebookId": null 
 
    }, 
 
    "day": "2017-01-06", 
 
    "soundcloudTrackId": "277888181" 
 
    }, 
 
    "1": { 
 
    "id": "677", 
 
    "name": "Maedchenhouse Vol. 13", 
 
    "artist": { 
 
     "id": "1089", 
 
     "name": "maedchenhouse", 
 
     "soundcloudId": 73887525, 
 
     "facebookId": null 
 
    }, 
 
    "day": "2017-01-05", 
 
    "soundcloudTrackId": "192561213" 
 
    }, 
 
    "hasAnother": true 
 
}

は私のイオン性のhtmlファイルです：

<ion-grid *ngFor="let set of sets"> 
 
    <ion-card> 
 
     <img src="https://i1.sndcdn.com/artworks-000174566284-nngazk-t300x300.jpg"/> 
 
     <ion-card-content> 
 
     <ion-card-title> 
 
     {{set.name}} 
 
      </ion-card-title> 
 
     <p> 
 
      The most popular industrial group ever, and largely 
 
      responsible for bringing the music to a mass audience. 
 
     </p> 
 
     </ion-card-content> 
 
    </ion-card> 
 
    </ion-grid>

そして、これは私がそれを解析する方法である：

public generateSets(data){ 
 
    \t this.sets = JSON.parse(data); 
 
    \t alert(this.sets[0].name); 
 
    }

ところでアラートは動作しますが、私は私のイオンhtmlファイルにグリッドを更新する方法がわかりません。 ループを使わない{{[0] .name}}も動作しません。 アイデアはありますか？ グリーティング

Answer 1

テンプレートには配列が必要です。したがって、jsonオブジェクトを配列に変換します。

sets_array = Object.keys(this.sets).map(function (key) { return this.sets[key]; }); 

テンプレートで使用します。