Angular 4 [object Object]

Question

Im trying to iterate over an array but the dom is displaying [ object Object] instead. In other threads some people recommended to use Stringify and then it display the info but I can't iterate over a string. Thanks for your help.

Here is my code:

html

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

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 { MarketViewModel } from '../comprarmonedas/datosmoneda'


@Injectable()
export class BittrexService {

  constructor(private http: Http, private marketModel : MarketViewModel) { }

  public getPrices() :Observable<MarketViewModel> {
    return this.http.get('https://bittrex.com/api/v1.1/public/getmarketsummary?market=btc-zec')
    .map((response: Response) => response.json());
  }

}


interface

export class MarketViewModel {
  public success : boolean;
  public message : string;
  public result : MarketListObject[];
}

export class MarketListObject {
    public MarketName : string;
    public High : number;
    public Low : number;
    public Volume : number;
    public Last : number;
    public BaseVolume : number;
    public TimeStamp : number;
    public Bid : number;
    public Ask : number;
    public OpenBuyOrders : number;
    public OpenSellOrders : number;
    public PrevDay : number;
    public Created : number; 

}

component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { BittrexService } from '../../bittrex/bittrex.service';
import {Observable} from "rxjs";

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

  private prices = [];

  constructor(private bittrexService: BittrexService) {
    this.bittrexService = bittrexService;
  }

ngOnInit(){
  this.bittrexService.getPrices()
  .subscribe(
    data => this.prices = data.result
  );
}
 }

instead of printing each price, you are coalescing the list into a string — nick zoum
– nick zoum, Commented Jun 14, 2017 at 18:37
@nickzoum Im a rookie. What do you mean by that and how can I fix it? Thanks for your reply — claudiomatiasrg
– claudiomatiasrg, Commented Jun 14, 2017 at 18:54
It means that you are trying to merge a lot of objects into a string. The answer below shows how to fix it. — nick zoum
– nick zoum, Commented Jun 14, 2017 at 19:01

Vivek Doshi · Accepted Answer · 2017-06-14 19:18:09Z

3

Replace this :

<div *ngFor="let price of prices">
    High : {{price.High}} , Low : {{price.Low}}
</div>

You were trying to print array of obejcts prices, It should be price not prices

    High : {{price.High}} , Low : {{price.Low}}

Like this you can access any of the given values :

{
      "MarketName": "BTC-ZEC",
      "High": 0.16290000,
      "Low": 0.13087156,
      "Volume": 12760.98721068,
      "Last": 0.15650003,
      "BaseVolume": 1908.20341779,
      "TimeStamp": "2017-06-14T19:15:25.57",
      "Bid": 0.15650003,
      "Ask": 0.15786551,
      "OpenBuyOrders": 1130,
      "OpenSellOrders": 1257,
      "PrevDay": 0.13380000,
      "Created": "2016-10-28T17:13:10.833"
    }

edited Jun 14, 2017 at 19:18

answered Jun 14, 2017 at 18:35

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

7 Comments

Vivek Doshi Over a year ago

@ClaudioRamírezGuichard , will you please show me the value of prices ?

Vivek Doshi Over a year ago

I was not aware of the output of the price , nothing else @AJT_82

AVJT82 Over a year ago

Well I check first before answering if there is a possibility to do that. And it makes no sense to change your answer and have duplicate answers. I delete my answer if I see that it is incorrect and someone else has provided a correct answer instead. But I guess that's just how I think... ;)

Vivek Doshi Over a year ago

Do you want me to remove my answer ? I will do it , @AJT_82

AVJT82 Over a year ago

Naah, I deleted mine, it's not the end of the world :) Just wanted to comment on how I think. Other people might disagree with me :P But anyway, the most important thing is that OP got a correct and helpful answer :)

|

Collectives™ on Stack Overflow

Angular 4 [object Object]

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related