Back

Explore Courses Blog Tutorials Interview Questions
+1 vote
3 views
in Blockchain by (47.6k points)

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

  );

}

}

1 Answer

0 votes
by (106k points)
edited by

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.

Welcome to Intellipaat Community. Get your technical queries answered by top developers!

30.5k questions

32.6k answers

500 comments

108k users

Browse Categories

...