I'm currently practicing with Angular2 and Ionic2. I want to retrieve data from an API (For example: https://www.cryptocompare.com/api/data/coinlist/). To retrieve the data I've made a provider with a load method:

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);
    });
}); 
}

And to show the data i've made the following template structure:

<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>

Here I use a Pipe, as the response are Objects. However, I cant seem to make it work. Console.log shows me that the response are still objects with objects and I'm guessing that the problem lays there. (console.log is also shown twice in the console?)

Console: Console.log of this.currencies

For reference the Pipe class:

@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;
  } 
}

The view shows an empty list and there are no errors outputted in the console. Does anyone know how to solve this? Many thanks

share
    
your response is not an array of objects first, so check this, according to your template, it should be an array of objects. – Avnesh Shakya Dec 17 '16 at 14:54
    
Hi Avnesh, thank you for your response. If I remove the pipe I get the following error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.". This indicated to me that it are objects. Could you perhapse explain yourself more? – Thjeu Dec 17 '16 at 15:03
    
As I already told, according to your view, you need response: [{"Name": "xyz", "FullName": "xyz", ...}, ...] so that directive *ngFor can iterate in you view template. checkout angular doc if you need for clarification. – Avnesh Shakya Dec 17 '16 at 15:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.