Angular4 Error trying to diff '[object Object]'

Question

I'm trying to display some info in the dom but I get this error:

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

What Im trying to do is iterate over this data from https://www.surbtc.com/api/v2/markets/btc-clp/ticker:

{"ticker":{"last_price":["1771455.0","CLP"],"min_ask":["1771432.0","CLP"],"max_bid":["1660003.0","CLP"],"volume":["178.37375119","BTC"],"price_variation_24h":"-0.107","price_variation_7d":"-0.115"}}

I want to display it in the html like this:

<div *ngFor="let price of prices">
    {{price.min_ask}}
    </div>

this is the service.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Observable} from "rxjs";
import 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import { SurbtcMarket } from './surbtcmarket'


@Injectable()
export class SurbtcService {

  constructor(private http: Http, private surBtcMarket : SurbtcMarket) { }

  public getPricess() :Observable<SurbtcMarket> {
    return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker')
    .map((response: Response) => response.json());
  }

}

Interface surbtcmarket.ts

export class SurbtcMarket {
public ticker: SurbtcMarketView[];
}

export class SurbtcMarketView {
  public last_price : number;
  public min_ask : number;
  public max_bid : number;
  public volume : number;
  public price_variation_24h : number;
  public price_variation_7d : number;
}

component.ts

import { Http, Response, Headers } from '@angular/http';
import { SurbtcService } from '../../surbtc/surbtc.service';
import {Observable} from "rxjs";

@Component({
  selector: 'app-comprarltc',
  templateUrl: './comprarltc.component.html',
  styleUrls: ['./comprarltc.component.scss']
})
export class ComprarltcComponent implements OnInit {

  private prices = [];

  constructor(private surbtcService: SurbtcService) {
    this.surbtcService = surbtcService;
  }

ngOnInit(){
  this.surbtcService.getPricess()
  .subscribe(
    data => this.prices = data.ticker
  );
}
}

Possible duplicate of Error trying to diff '[object Object]' — Nico Van Belle
– Nico Van Belle, Commented Jun 15, 2017 at 18:17
The response you get from https://www.surbtc.com/api/v2/markets/btc-clp/ticker is not a JSON array but a JSON object (1 instance of SurbtcMarket in your case). You cannot use *ngFor on an Object because you cannot loop over it. — Nico Van Belle
– Nico Van Belle, Commented Jun 15, 2017 at 18:20
@NicoVanBelle thanks for your reply. Is there a way to transform that object to an array? — claudiomatiasrg
– claudiomatiasrg, Commented Jun 15, 2017 at 18:22
Also, you mapped ticker as an array of type SurbtcMarketViewbut again, it's not an array, it is an object. — Nico Van Belle
– Nico Van Belle, Commented Jun 15, 2017 at 18:23
Yes you can wrap your 1 object in an array, but you shouldn't do that. Just correct your mappings (check the JSON spec on object / array) and remove use the *ngFor loop. — Nico Van Belle
– Nico Van Belle, Commented Jun 15, 2017 at 18:27

Nehal · Accepted Answer · 2017-06-16 01:32:34Z

2

If you want to have price as an array, then you have push the object in prices array.

ngOnInit(){
  this.surbtcService.getPricess()
  .subscribe(
    data => this.prices.push(data.ticker);
  );
}

OR, you can just directly access the object properties by assigning data.ticker to prices.

private prices = new SurbtcMarketView();

constructor(private surbtcService: SurbtcService) {

}
ngOnInit(){
   this.surbtcService.getPricess()
        .subscribe(data =>{
            this.prices = data.ticker;
        });
}

HTML:

<div *ngFor="let item of prices.min_ask">
  {{item}}
</div>

UPDATE:

See the Plnkr demo, I have resolved the issue that was causing error in parsing the json response.

edited Jun 16, 2017 at 1:32

answered Jun 15, 2017 at 20:26

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

4 Comments

claudiomatiasrg Over a year ago

Thanks for your reply @Nehal. Now I get a typing error saying that property ticker does not exist on type surbtcMarket[]

Nehal Over a year ago

Added a working Plnkr demo, please see the updated answer.

claudiomatiasrg Over a year ago

Thanks again @Nehal. Now I get this error in the console "Failed to load resource: the server responded with a status of 406 (Not Acceptable)".

Nehal Over a year ago

That's a server error you have the resolve. Has nothing to do with angular. I was getting a CORS error for retrieving data from surbtc.com/api/v2/markets/btc-clp/ticker. So, I used the CORS chrome plugin to bypass the CORS error.

Mayur Saner · Accepted Answer · 2019-06-04 07:24:59Z

0

Else you can also use this ,

prices : SurbtcService[] = [];

And then you can push the user object and make as a array,

this.prices.push(<<the data you want to push>>);

answered Jun 4, 2019 at 7:24

Mayur Saner

4625 silver badges11 bronze badges

Comments

Prav · Accepted Answer · 2017-06-15 18:23:03Z

-1

public getPricess() :Observable<SurbtcMarket> { return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker') .map((response: Response) => response.json() as SurbtcMarket); }

This might be due to the fact as it's not mapped to a type. And I assume this only retun one object otherwise you have to return an array.

public getPricess() :Observable<SurbtcMarket[]> { return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker') .map((response: Response) => response.json() as SurbtcMarket[]); }

answered Jun 15, 2017 at 18:23

Prav

2,9132 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular4 Error trying to diff '[object Object]'

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related