The Angular 4 framework is a powerful tool for web development, offering

While attempting to iterate over an array, I noticed that the DOM is displaying [ object Object] instead of the desired information. Some sources suggested using Stringify to display the info, but it's not possible to iterate over a string. Any assistance would be greatly appreciated.

Below 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
  );
}
 }

Answer №1

Modify this :

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

You attempted to display an array of objects prices, It should be price instead of prices

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

In this manner, you can retrieve any of the provided 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"
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Angular Karma Testing: Uncaught ReferenceError - Stripe not recognized

When running tests with karma, I encountered the following error: ReferenceError: Stripe is not defined Component import { Component, OnInit } from "@angular/core"; import { FormBuilder } from "@angular/forms"; import { Router } from & ...

The response parser in Angular 7 is failing to function correctly

Hey, I recently updated my Angular from version 4.4 to the latest 7 and after encountering several errors, I was able to get my service up and running. However, I'm facing an issue with my output parser function which is supposed to parse the login re ...

Hear and register keypress in Angular service

I offer a dialog service Check it out below @Injectable() export class HomeDialogService { public constructor(private readonly dialogService: DialogService, private readonly userAgent: UserAgentService) {} @HostListener('document:keydown.escape ...

Determining the size of each element in an array using Angular

Can someone help me figure out how to count the number of times "Jack" appears as the winner in my array? I need to return this count. function myCtrl($scope) { $scope.data = [{ game: 1, dnscore: 10, bwscore: 9, winner ...

Unraveling the operations of Node.js in its http.createServer method

I can't wrap my head around createServer in Node.js. This specific part of the code is really giving me trouble. http.createServer((req, res) => { let viewUrl = getViewUrl(req.url); fs.readFile(viewUrl, (error, data) => { if (error) { ...

Is there stability in using *ngFor for lists in Nativescript Angular?

Update: I have inquired about the current status of RadListView in Nativescript, questioning if it still exists. You can find more information here. Initial query: Is it suitable to utilize *ngFor for lists in Nativescript? Typically, I see recommendatio ...

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

Unable to execute karma test cases as a result of ngOnDestroy being inaccessible

I have a component structured as follows: export class InkbarComponent implements AfterViewInit, OnDestroy { resizeListener: any; constructor(private _renderer: Renderer, private _elementRef: ElementRef, public renderer: Renderer) { } ngAfter ...

How do I rearrange the order of a collection in Firestore using a reference that I already have?

Is there a method to maintain a reference of the same collection while altering the ordering using firestore? TLDR: I am looking to achieve similar functionality as demonstrated in: , but since my data is sourced from firestore, I am struggling to find th ...

Understanding JavaScript Prototypal Inheritance within ES5 Classes

I've been working on creating an XMLHttpRequest interceptor for Angular, encountering a roadblock when trying to intercept a third-party library that uses the XMLHttpRequest API. Although the solution below is functional, I've run into issues wit ...

Check if a value is present in the array with *ngIf

I'm curious about how to use the ngIf directive in a specific scenario. In my Angular application, I have dynamically generated angular material toggles, each with a unique id. I'm familiar with using ngIf to conditionally display elements on the ...

Stop the transmission of ts files

Recently, I noticed that when using node JS with Angular-CLI, my .ts files are being transmitted to the client through HTTP. For example, accessing http://localhost/main.ts would deliver my main.ts file to the user. My understanding is that ts files are s ...

Issue with Angular 6 Share module functionality not functioning as expected

While creating my Angular 6 application, I encountered an issue with sharing a header across multiple pages. I tried including it but it doesn't seem to be working. Can anyone point out what I might be doing wrong? For a demonstration, you can visit . ...

Angular - encountering challenges when implementing the native Web Speech API

My goal is to integrate the native Web Speech API directly without relying on any third-party libraries. I have successfully integrated the API into my service and voice recognition is functioning properly, able to generate text from recognized speech. Ho ...

Unable to crop the content of an input text field using Angular Forms 7

I am currently using Angular forms(7.2.10) with Parent / child components in my Angular 7 application. My goal is to successfully trim the text field input (String) from both leading and trailing white spaces, but unfortunately, I have not been able to ach ...

The issue of ExpressionChangedAfterItHasBeenCheckedError is a common problem faced by Angular

I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...

Issue with Dates in Typescript array elements

When attempting to compare different Date elements in my code, I encountered an issue. I have two date elements representing date formats but am unable to compare them because I keep receiving the error message "core.js:6237 ERROR TypeError: newticketList. ...

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

My aim is to validate if the length of events is 0 and the length of the term is greater than 2 using the code below: <li class="more-result" *ngIf="events?.length == 0 && term.value.length > 2"> <span class="tab-content- ...

Could Angular2's Http Get method exclusively handle Json data?

mma-api.service.ts getAthletes() { return this.http.get('http://mma-data-api.mma.com/api/v3/athletes') .map(res => res.json()); } athlete.component.ts data: string; constructor(private mmaApiService: MmaApiService) ...

Arrange elements within an array according to a specific property and the desired sorting sequence

Looking for a way to sort an object array in Angular 16+ based on status. The desired status order is: [N-Op, Used, Unknown, Op] Here's the sample data: const stockList = [ { 'heading': 'SK', 'status': &a ...