Ionic AppからJSONを配列に変換する

Question

私はイオンと角度の両方に新しいので、この質問があまり意味をなさないなら容赦してください。

プラットフォーム：イオン3.

私は、プロバイダがあります

getLights() { 
    return new Promise(resolve => { 
    this.http.get(this.apiUrl+'/lights').subscribe(data => { 
     resolve(data); 
    }, err => { 
     console.log(err); 
    }); 
    }); 
} 

これは、次のデータ（機密情報は削除）

{ 
    "1": { 
     "state": { 
      "on": false, 
      "bri": 98, 
      "alert": "none", 
      "reachable": true 
     }, 
     "swupdate": { 
      "state": "noupdates", 
      "lastinstall": null 
     }, 
     "type": "Dimmable light", 
     "name": "Lion", 
     "modelid": "LWB010", 
     "manufacturername": "Philips", 
    }, 
    "2": { 
     "state": { 
      "on": true, 
      "bri": 100, 
      "alert": "none", 
      "reachable": true 
     }, 
     "swupdate": { 
      "state": "noupdates", 
      "lastinstall": null 
     }, 
     "type": "Dimmable light", 
     "name": "Brutus", 
     "modelid": "LWB010", 
     "manufacturername": "Philips", 
    }, 
    "3": { 
     "state": { 
      "on": true, 
      "bri": 254, 
      "hue": 8418, 
      "sat": 140, 
      "effect": "none", 
      "xy": [ 
       0.4573, 
       0.41 
      ], 
      "ct": 366, 
      "alert": "none", 
      "colormode": "ct", 
      "reachable": true 
     }, 
     "swupdate": { 
      "state": "noupdates", 
      "lastinstall": null 
     }, 
     "type": "Extended color light", 
     "name": "Hue lightstrip plus 1", 
     "modelid": "LST002", 
     "manufacturername": "Philips" 
    } 
} 

イオンページを返すを次のようにrest.tsをlist.ts

export class ListPage { 

    lights: any; 
    icons: string[]; 

    constructor(public navCtrl: NavController, 
       public navParams: NavParams, 
       public restProvider: RestProvider) { 

    this.getLights(); 
    } 

    getLights() { 
    this.restProvider.getLights() 
    .then(data => { 
     this.lights = data; 
     console.log(this.lights); 
    }); 
    } 

} 

とするlist.html：

<ion-content> 
    <ion-list inset> 
    <ion-item *ngFor="let light of lights"> 
     <h2>{{light.name}}</h2> 
     <p>{{light.type}}</p> 
    </ion-item> 
    </ion-list> 
</ion-content> 

コンソールログ文が正しくJSONを表示しますが、私は次のエラーのためにするlist.htmlでngForを使用して、それを繰り返すことはできません。

'オブジェクト'タイプの異なる[オブジェクトオブジェクト]を見つけることができません。 NgForは、配列などのIterablesへのバインドのみをサポートしています。

JSONをjavascript配列に変換する必要がありますが、どこでどのようにこれを行うかはわかりません。どのポインタも非常に高く評価されます。

Answer 1

どのように構成されているかに応じて、Array-likeオブジェクトをArrayに変換するさまざまな方法があります。この場合、あなたはかなり簡単にそれを行うことができます：

data => resolve(Object.keys(data).map(key => data[key])) 

これは、約束のオブジェクトの配列で解決され、コンポーネントで動作するはずです。

私はあなたがあなた自身の約束を使用する必要がないことを指摘するだろう、あなたは、観察可能な方法toPromise使用することができます。実際には、あなたも約束し、あなたを使用する必要はありません

getLights() { 
    return this.http.get(`${this.apiUrl}/lights`).map(data => 
    Object.keys(data).map(key => data[key]) 
).toPromise(); 
} 

を代わりにgetLightsに登録することができます。

this.restProvider.getLights().subscribe(data => { 
    this.lights = data; 
}); 

注：観察可能なチェーンで

this.http.get(url).map(response => response.json()) 

を同様に：これは角5を使用していない場合

私はあなたがする必要があると思います。

Answer 2

上記のご返信ありがとうございます。非常に助かりましたが、残念ながら私が期待していたように、それを実現することはできませんでした。

私はまだキーとしてJSONを含む数字の問題を回って、ライトを反復することができません....

{ 
"state": { 
    "on": false, 
    "bri": 98, 
    "alert": "none", 
    "reachable": true 
}, 
"swupdate": { 
    "state": "noupdates", 
    "lastinstall": null 
}, 
"type": "Dimmable light", 
"name": "Lion", 
"modelid": "LWB010", 
"manufacturername": "Philips", 
} 

使用して、インターフェイス：

しかし、私は1つの光の応答をキャストすることができました（ '1' 光得るために、私のAPIの呼び出しを変更すること）

export interface State { 

    on: boolean; 
    bri: number; 
    alert: string; 
    reachable: boolean; 
} 

export interface Swupdate { 
    state: string; 
    lastinstall?: any; 
} 

export interface Light { 
    state: State; 
    swupdate: Swupdate; 
    type: string; 
    name: string; 
    modelid: string; 
    manufacturername: string; 
    uniqueid: string; 
    swversion: string; 
    swconfigid: string; 
    productid: string; 
} 

次に使用HttpClientを

this.http.get<Light>(this.apiUrl+'/lights/1').subscribe(data => { 
     console.log(data.state.bri); 
}) 

誰かがinterの構造を詳しく説明できる場合は、そのキーが数字であるところで、ライトのリストを首尾良くキャストするかもしれない顔。これは理想的だろう。