2016-12-17 106 views
0

我目前正在練習Angular2和Ionic2。我想從API中檢索數據(例如:https://www.cryptocompare.com/api/data/coinlist/)。要檢索我做了一個負載方法提供的數據:Angular 2 http獲取對象數組

load() { 
if (this.currencies) { 
    // already loaded data 
    console.log('already has data'); 
    return Promise.resolve(this.currencies); 
} 

var url = this.baseUrl + '/coinlist'; 

// don't have the data yet 
return new Promise(resolve => { 
    this.http.get(url) 
    .map(res => res.json().Data) 
    .subscribe(data => { 
     this.currencies = data; 
     resolve(this.currencies); 
     console.log(this.currencies); 
    }); 
}); 
} 

,並顯示出我做了下面的模板結構中的數據:

<ion-row *ngFor="let currency of currencies | orderBy : ['-Name'] | keys" (click)="itemTapped($event, currency)"> 
    <ion-col width-10> 
    1 
    </ion-col> 
    <ion-col width-60> 
    {{currency.Name}} 
    </ion-col> 
    <ion-col width-30> 
    {{currency.FullName}} 
    </ion-col> 
    </ion-row> 
    <ion-row> 

這裏我用一個管道,爲響應是對象。但是,我似乎無法使它工作。 Console.log告訴我,響應仍然是對象與對象,我猜測問題在那裏。 (的console.log也控制檯中顯示兩次?)

控制檯: Console.log of this.currencies

爲了參考的管類:

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    if (!value) { 
     return value; 
    } 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

該視圖顯示了一個空列表,並且沒有輸出錯誤在控制檯。有誰知道如何解決這個問題?非常感謝

+0

你的反應是不是對象的數組第一,所以檢查這一點,根據您的模板,它應該是一個對象數組。 –

+0

嗨Avnesh,謝謝你的迴應。如果我刪除管道,我得到以下錯誤:「無法找到類型爲'object'的不同支持對象'[object Object]'。NgFor僅支持綁定到Iterables,如數組。」。這表明它是對象。你能否更多地解釋你自己? – Thjeu

+0

正如我已經告訴,根據你的**視圖**,你需要回應:'[{「名稱」:「xyz」,「FullName」:「xyz」,...},...]'這樣指令'* ngFor'可以迭代你的視圖模板。結帳**棱鏡文檔**如果你需要澄清。 –

回答

0

我可能錯了,但它與AngularJS 1.x一起工作。

而不是使用對象更改它們以陣列:

$http.get('/*request*/').success(function(data){ 
angular.forEach(data, function(value, key){ 
    users.push(value); 
}); 
/*your code*/ 
});