Ionic Error: Error trying to diff '[object Object]'

Question

I can't seem to figure out what I'm doing wrong. I"m trying *ngFor on a typed Market[] variable, but for some reason it can't read the array properly. Ionic is complaining markets is not a array, but from my implementation it would appear it is. Help

Market def:

 export interface Market {
    id: string;
    symbol: string;
    base: string;
    quote: string;
    info: any;
    lot: number;
}

My Service call

  getMarketData(): Observable<Market[]> {
    let bittrex = new ccxt.poloniex();
    return Observable.fromPromise(bittrex.loadMarkets());
  }

My page setting the data

    markets: Market[] = [];
    async loadMarkets() {
      this.cryptoService.getMarketData().subscribe((data: Market[]) => {
      this.markets = data;
    })
  }

My template

<ion-list #scheduleList [hidden]="markets.length < 0">

<ion-item-group *ngFor="let market of markets">

  <ion-item-divider sticky>
    <ion-label>
      {{market}}
    </ion-label>
  </ion-item-divider>
</ion-item-group>

What I don't understand is why I'm not getting back a array.

you seem to be missing } here: {{market}..not sure if it is related though — Suraj Rao
– Suraj Rao, Commented Dec 21, 2017 at 7:03
for now I don't care just want it read the array properly. I've tried without it with same issue — Jesse
– Jesse, Commented Dec 21, 2017 at 7:06
did you console log data in subscribe and verify if it is an array? — Suraj Rao
– Suraj Rao, Commented Dec 21, 2017 at 7:06

Ramesh Rajendran · Accepted Answer · 2017-12-21 07:13:48Z

1

Check *ngIf before *ngFor try this

<div *ngIf="markets">
<ion-item-group *ngFor="let market of markets">

  <ion-item-divider sticky>
    <ion-label>
      {{market}}
    </ion-label>
  </ion-item-divider>
</ion-item-group>
</div>

And check your response data instance is an array | correct type

this.markets=[]
if (data instanceof Array) {
      this.markets = data;
  }

edited Dec 21, 2017 at 7:13

answered Dec 21, 2017 at 7:08

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jesse Over a year ago

These fixed the error. However nothing appears on the page (

Ramesh Rajendran Over a year ago

Because your data format is not an array... Ngfor should accept array of data formats only... You should check with your data....

Jesse · Accepted Answer · 2017-12-21 07:54:16Z

1

So basically my return object was not a true array. Even though Typescript was returning Market[] array . The result was a object of Market. The trick was.

   getMarketData(): Observable<Market[]> {
    let bittrex = new ccxt.poloniex();
    return Observable.fromPromise(bittrex.loadMarkets()).map(data => 
    Object.keys(data).map(k => data[k]))
}

answered Dec 21, 2017 at 7:54

Jesse

1,9402 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Ionic Error: Error trying to diff '[object Object]'

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related