What is the process for retrieving information from an observable array?

Question

What is the process for retrieving information from an observable array?

I am currently developing an application with a Python backend and Angular frontend. The main functionality of the app involves retrieving FIFA players from a MongoDB using the getLoyalPlayers function.

Below is the snippet from the loyalty.component.ts file:

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 section from web.service.ts:

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

The retrieved data is then rendered in loyalty.component.html using async:

<div *ngFor="let player of player_list | async">
    <!-- Individual items can be accessed like -->
    {{ player.short_name }}
</div>

In trying to access the elements within this array in the typescript file, I attempted the following approach:

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

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

    console.log(this.player_list.short_name)
}

However, this resulted in a value of undefined:

https://i.sstatic.net/wvRnh.png

I am seeking guidance on how to properly retrieve this data. How should I proceed?

angular typescript mongodb

Answer 1

Answer №1

When dealing with observables, there are three different approaches to consider:

Utilize the pipe async method (indicated by |async in .html).
Subscribe to the observable, save the result in a variable, and loop through that variable. Remember that the variable only holds a value after the call is complete.

    this.apiService.getData(this.page).subscribe((response:any)=>{
        this.data=response;  //<--note that data is the "object" here
        //you can now use 
        console.log(this.data)
     })
      //but you cannot use it here
        console.log(this.data)

Use tap within the pipe operator to store the value in a variable. Tap is executed after the observable has been subscribed to and completed - pipe async enables this functionality.

    //observe that this.data$ is an Observable
    //in Angular, the "$" conventionally signifies an observable
    this.data$=this.apiService.getData(this.page)
       .pipe(tap((response:any)=>{
        this.data=response;
        //now you can use 
        console.log(this.data)
     }))

Answer 2

When dealing with observables, there are three different approaches to consider:

Utilize the pipe async method (indicated by |async in .html).
Subscribe to the observable, save the result in a variable, and loop through that variable. Remember that the variable only holds a value after the call is complete.

    this.apiService.getData(this.page).subscribe((response:any)=>{
        this.data=response;  //<--note that data is the "object" here
        //you can now use 
        console.log(this.data)
     })
      //but you cannot use it here
        console.log(this.data)

Use tap within the pipe operator to store the value in a variable. Tap is executed after the observable has been subscribed to and completed - pipe async enables this functionality.

    //observe that this.data$ is an Observable
    //in Angular, the "$" conventionally signifies an observable
    this.data$=this.apiService.getData(this.page)
       .pipe(tap((response:any)=>{
        this.data=response;
        //now you can use 
        console.log(this.data)
     }))

What is the process for retrieving information from an observable array?

Answer №1

Similar questions

Exploring Angular: distinguishing between sessions on separate tabs

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

Error encountered: ExpressionChangedAfterItHasBeenCheckedError when trying to load the loading indicator

A step-by-step guide on dynamically binding an array to a column in an ag

The Angular application is encountering difficulty accessing the Django Rest Framework API due to a CORS problem

Guide to incorporating d.ts file for enhancing intellisense in VS Code using a method akin to the NPM approach

Oops! The program encountered an issue on the production environment, but it's running smoothly

Tips on customizing Char.js doughnut charts

Accessing the property of an object with TypeScript

Utilizing TypeScript 2's Absolute Module Paths

What is the method to access an interface or type alias that has not been explicitly exported in TypeScript type definitions?

Encountered an issue launching the advanced web server and reverse proxy server nginx for high performance

Creating a tsconfig.json file that aligns perfectly with your package.json and tsc command: a step-by-step

Creating an app for sending text messages and making video calls with Spring Boot technology

What is the process of connecting two models in Mongoose?

Click event based on condition in Angular 2

Utilize JQuery to choose the angular element

What improvements can I implement in this React Component to enhance its efficiency?

"Uploading user profile images with Angular, Express, Multer, and Mongoose made easy