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

0 votes

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
  );
}
 }
Sep 4, 2018 in Blockchain by digger
• 26,550 points
5,776 views

2 answers to this question.

+1 vote
Best answer

There are two approaches to this:

1. You can push the object in prices array as follows:

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

2. 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>
answered Sep 4, 2018 by slayer
• 29,170 points

selected Apr 23 by Omkar
Hi @slayer.

Thanks for the solution, it worked for me. But I didn't understand what's the logic behind it, can you place explain?

Hello @Suri. The cause for the error was that ngOnInit requires an array to iterate over but an object is being sent. So, the logic is to provide an iterable array. 

+1 vote

Try this format:

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 Dec 10, 2018 by Giri

Related Questions In Blockchain

0 votes
1 answer
0 votes
1 answer

Error while trying to create dir if missing: mkdir /var/hyperledger: permission denied

The following commands should help: sudo mkdir -p ...READ MORE

answered Jul 6, 2018 in Blockchain by Christine
• 15,790 points
82 views
0 votes
1 answer
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
155 views
+1 vote
3 answers

Removing double quotes from a string from JSON response in PHP

Just remove the json_encode call, and it should work: $resp ...READ MORE

answered Sep 12, 2018 in Blockchain by digger
• 26,550 points
3,634 views
0 votes
1 answer
0 votes
1 answer

How to solve "error trying install composer runtime" in Hyperledger composer?

I think the docker-compose tool is not ...READ MORE

answered Jul 17, 2018 in Blockchain by slayer
• 29,170 points
88 views
0 votes
1 answer