Angular Bitcoin error: "Error trying to diff '[object Object]'

Question

The data I am trying to iterate is as follows:

{"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 in the following format:

<div *ngFor="let price of prices">

    {{price.min_ask}}

</div>

When I try to display some info in dom, I get this error:

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

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

  );

}

}

Answer 1

To solve this problem I will tell you the most important approaches to this:

1. The first thing you can do is push the object in prices array as follows below is the code for the same:

ngOnInit(){

  this.surbtcService.getPricess()

  .subscribe(

    data => this.prices.push(data.ticker);

  );

}

2. The second way is 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>

Know how Blockchain works in depth by enrolling in Blockchain Course.