Angular, Cant reach Object Arrays content

Question

I want to use a crypto coin api and i get data from server to my "_coins:coin[]" list. I tried "Console.log(_coins)" , console shows the array, also I can open this list at html page with "*ngFor" but i cant open at .ts file.

i tried this at component

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coins=this._coinrepo.getMultiCoins(["BTC","ETH"]);
    console.log(this._coins);
   }

and at console:

Array []
0: Object { KEY: "BTC", BTC: 1, USD: 10018.38, … }
1: Object { KEY: "ETH", BTC: 0.02072, USD: 207.49, … }
length: 2
<prototype>: Array []

but i tried

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coins=this._coinrepo.getMultiCoins(["BTC","ETH"]);
    this._coins.forEach(i=>{
      console.log(i);
    });
   }

and at console nothing. I also tried for loop, .find, .pop ... nothing work. i want to take data like :

for(let item of this._coins){
      _btc=item.BTC;
      _usd=item.USD;
    }

Please help me.. codes are here : https://stackblitz.com/edit/angular-ejrojd?embed=1

Can you check if this is also printing: public _coins:coin[]=[]; constructor(private _coinrepo:CoinRepository) { this._coins=this._coinrepo.getMultiCoins(["BTC";"ETH"]); if (this._coins) console.log(this._coins); } — Ashmah
– Ashmah, Commented Sep 22, 2019 at 21:02
this._coinrepo.getMultiCoins(["BTC","ETH"]) - Is this returns an observable? or plain array? If it returns an observable then you need to subscribe. In HTML it is working because you might be using async pipe. Also Is there any error on console? — user2216584
– user2216584, Commented Sep 22, 2019 at 21:20
@user2216584 it returns array used subscribe method before returning — cglyn_kya
– cglyn_kya, Commented Sep 22, 2019 at 21:40

user2216584 · Accepted Answer · 2019-09-22 22:47:22Z

You should not return an array [or subscribe in the service] from the this._coinrepo.getMultiCoins(["BTC","ETH"]), instead you should return an observable and then subscribe in the component. Because this.restService.getMultiCoin(c_list.toString()) is an async call which will not immediately return. Change your method like this:

 getMultiCoins(c_list:string[]): Observable<coin[]>{
    return this.restService.getMultiCoin(c_list.toString())
        .pipe(
          map(apiRes => {

            for (let item in apiRes) {
               this.coins.push(
                { KEY: item, BTC: apiRes[item].BTC, USD: apiRes[item].USD, EUR: apiRes[item].EUR, TRY: apiRes[item].TRY }
            )
        }                
            return this.coins;
          })
        )
 }

Now in you component subscribe to the Observable returned from getMultiCoins API to unwrap the coins array like this:

public _coins:coin[]=[];
  constructor(private _coinrepo:CoinRepository) {
    this._coinrepo.getMultiCoins(["BTC","ETH"]).subscribe((coins) => {
      this._coins = coins;
        this._coins.forEach(i=>{
        console.log(i);
      });
     }
    );        
   }

Hope it helps.

thanks for answer its very illustrative but i get "ERROR TypeError: "apiRes.map is not a function"
@cglyn_kya looks like your this.restService.getMultiCoin(c_list.toString()) does not return an array[instead it returns an object]. I have changed my code to the same code which was there in your subscribe method i.e. for loop. See my edited answer. Hope it helps.
it works :) i understand i must do my work in subscribe method. In subscribe i can now reach all but outside the subscribe not work. thanks for everything :)

ilyas shabi · Accepted Answer · 2019-09-22 21:05:00Z

0

It's an Object you can't iterate it using for loop or forEach, try this code:

for(const key in this._coins){
     console.log("key : ", key , " val : ", this._coins[key]);
}

answered Sep 22, 2019 at 21:05

ilyas shabi

1941 silver badge7 bronze badges

3 Comments

Adrian Brand Over a year ago

Are you sure that the getMultiCoins method returns an array? This seems like a method that would be async so it would return a promise or an observable.

cglyn_kya Over a year ago

@AdrianBrand yes the method returns coin[] array used .subscribe before return

Adrian Brand Over a year ago

async doesn't work like that, if you subscribe in the getMultiCoins the call hasn't finished before you return and your array is empty.

Collectives™ on Stack Overflow

Angular, Cant reach Object Arrays content

2 Answers 2

3 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Related