Blank results when iterating through a non-empty array in angular template

Question

EDIT: I made changes in the push method but it still did not work I am making get request to an api and pushing each of the responses to an array. The array is visible when logged to console. On printing the length of the array in the template length comes out to be 5. But when I try to iterate through it using ngFor no output is being displayed

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Quote} from 'src/app/models/quote';
@Injectable({
  providedIn: 'root'
})
export class StockpriceService {

  url1='https://financialmodelingprep.com/api/v3/quote-short/'; 
  url2='?apikey=efa24b272821b542c459557332c02a1e';
  

  constructor(private http:HttpClient) { 
  }

  //alpha apikey="VETRGM94G70WQGX9";


  getQuote(symbol:string) //load data from api
  {
      return this.http.get<Quote>(this.url1 + symbol + this.url2);
  }
}

ts file

import { Component, OnInit } from '@angular/core';
import{Quote} from 'src/app/models/quote';
import{StockpriceService} from 'src/app/services/stockprice.service';
import { timer } from 'rxjs';
@Component({
  selector: 'app-stocks',
  templateUrl: './stocks.component.html',
  styleUrls: ['./stocks.component.css']
})
export class StocksComponent implements OnInit {

  stocks: Array<Quote>=[];
  symbols=['AAPL', 'GOOG', 'FB', 'AMZN', 'TWTR'];
  constructor(private serv:StockpriceService) { }

  ngOnInit(): void {

    this.symbols.forEach(symbol => {

     this.serv.getQuote(symbol).subscribe(
        (data:Quote)=>{
          console.log(data);
          this.stocks.push(
            {
              symbol:data.symbol,
              price:data.price,
              volume:data.volume
            }
          );
  
        }
      )
      
    });

    console.log('stocks array is')
    console.log(this.stocks);
    
  }

}

Template

<div *ngFor="let stock of stocks">

              {{stock.symbol}}
              {{stock.price}}
 </div>

sample api response

[ {
  "symbol" : "AAPL",
  "price" : 126.81380000,
  "volume" : 36245456
} ]

Accordingly I have an interface defined for it as

    export interface Quote{
    symbol:string;
    price:number;
    volume:number;
}

it needs to be data[0].symbol.. Please read the response from your api carefully — eko
– eko, Commented May 25, 2021 at 15:51
Change (data:Quote)=>{ to (data:Array<Quote>)=>{ and please apply my first comment to your code. — eko
– eko, Commented May 25, 2021 at 15:56

Harsh Mittal · Accepted Answer · 2021-05-27 21:20:37Z

0

This will work fine.

this.serv.getQuote(symbol).subscribe((data: Quote[]) => {
     console.log(data);
     this.stocks.push(...data);
});

answered May 27, 2021 at 21:20

Harsh Mittal

3463 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Blank results when iterating through a non-empty array in angular template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related