How to get data from an observable array?

Question

I have an application built using a Python backend and an Angular frontend. The app I'm building gets FIFA players from a MongoDB using the function getLoyalPlayers:

Here is the loyalty.component.ts:

import { Component } from "@angular/core";
import { WebService } from './web.service';

@Component({
  selector: 'loyal',
  templateUrl: './loyal.component.html',
  styleUrls: ['./loyal.component.css']
})
export class LoyalComponent {
  constructor(public webService: WebService) {}

  ngOnInit() {
    this.player_list = this.webService.getLoyalPlayers();
  }

  player_list: any = [];
}

This is the web.service.ts

  getLoyalPlayers(loyalPage: number) {
    return this.http.get('http://localhost:5000/api/v1.0/loyal-players');
  }

This data is then displayed using async in loyalty.component.html like so:

<div *ngFor="let player of player_list | async">
    <!-- Items inside this array are then accessed like -->
    {{ player.short_name }}
</div>

I am trying to access the items in this array in the typescript file like so:

ngOnInit() {
    if (sessionStorage['loyalPage']) {
      this.page = Number(sessionStorage['loyalPage']);
    }

    this.player_list = this.webService.getLoyalPlayers(this.page);

    console.log(this.player_list.short_name)
}

But this gives me an result of undefined:

How do I get this data to be returned?

Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Dec 13 '21 at 18:04
You have to subscribe to `this.player_list` if you want to get the value inside the typescript, but that will cause another http call. What exactly do you want to accomplish in the end by accessing the short_name in the code? — ShamPooSham, Dec 13 '21 at 18:07
Is this ngOnInit in another component, or the same? You are showing two different OnInits. — AT82, Dec 13 '21 at 18:48

score 1 · Accepted Answer · answered Dec 13 '21 at 18:55

When you work with observables you has tree different aproach

Use pipe async (you do it when use in .html |async)
Subscribe to the observable, store the result in a variable and iterate over this variable. Rememeber that the variable only get value after the call is completed

    this.webService.getLoyalPlayers(this.page).subscribe((res:any)=>{
        this.player_list=res;  //<--see that here player_list is the "object"
        //here you can use 
        console.log(this.player_list)
     })
      //but you can not use here
        console.log(this.player_list)

Use pipe tap to store the value in the variable. the rxjs operator tap is executed after the observable has subscribted and completed -the pipe async is who makes this work

    //see that this.player_list$ is an Observable
    //In Angular is common use the "$" to indicate that it's a observable
    this.player_list$=this.webService.getLoyalPlayers(this.page)
       .pipe(tap((res:any)=>{
        this.player_list=res;
        //here you can use 
        console.log(this.player_list)
     })))

How to get data from an observable array?

1 Answers1