What is the best way to ensure that the second http call only runs after the first http call has completed, and passing an argument retrieved from the first call to the

Question

What is the best way to ensure that the second http call only runs after the first http call has completed, and passing an argument retrieved from the first call to the

My current challenge involves hitting one API to retrieve a specific string, storing it in a variable, and then passing it to another HTTP API call. However, I'm encountering an issue where the API call requiring the argument executes but never sends the correct request. (Just a beginner here by the way)

Below are the two API calls, with some personal information removed for privacy.

async getMatches() {
    return this.http.get('matchesUrl', {
      headers: {
        'Authorization': 'Bearer **'
      }
    })
  }

  async getMatchStats(matchId: string) {
    return this.http.get(`specificMatchUrl/${matchId}/`, {
      headers: {
        'Authorization': 'Bearer **'
      }
    })
  }

And here is my component:

import { Component, OnInit } from '@angular/core';
import {GetapiService} from '../getapi.service';

@Component({
  selector: 'app-gamingpage',
  templateUrl: './gamingpage.component.html',
  styleUrls: ['./gamingpage.component.scss']
})
export class GamingpageComponent implements OnInit {

  title = '';
  wins = '';
  totalMatches = '';
  currentWinStreak = '';
  latestMap = '';
  matchId = '';
  constructor(
    private api: GetapiService
  ) { }

  async ngOnInit() {
    this.api.getPlayerStats().subscribe((data: any) => {
      this.title = data['game_id'];
      this.wins = data.lifetime['Wins']
      this.totalMatches = data.lifetime['Matches']
      this.currentWinStreak = data.lifetime['Current Win Streak']
    });

    (await this.api.getMatches()).subscribe((data: any) => {
      this.matchId = data.items[0].match_id;
    });

    (await this.api.getMatchStats(this.matchId)).subscribe((data: any) => {
      this.latestMap = data.rounds.round_stats['Map']
    })
  }

}

I initially believed that awaiting both calls would resolve this issue because getMatchStats won't be triggered until getMatches is completed and the matchId variable is assigned. However, upon making the call, the URL generated is incorrect and does not include the matchId. Despite console.log displaying the value correctly, there seems to be a misunderstanding on my end. I've checked similar questions but none seem to address my specific scenario... or at least as far as I comprehend. Thank you in advance for your assistance.

angular typescript api http

Answer 1

Answer №1

Avoid using async await, opt for switchMap rxjs operators

this.api.getMatches()).pipe(switchMap((data:any)=>{
   this.matchId =data.items[0].match_id;
   return this.api.getMatchStats(this.matchId)
})).subscribe((data: any) => {
      this.latestMap = data.rounds.round_stats['Map'];
});

Angular is brimming with Observables, utilizing rxjs operators allows us to transform / join /delay... observables. They require us to think in an "async way", which can be challenging but highly beneficial. Some of the key rxjs operators (though not limited to) include:

forkJoin: joining multiple observables and waiting until all are completed
switchMap: transforming one observable into another that depends on the first
map: transforming the response of an Observable
merge: creating an observable that emits a value each time one of several observables emit a value

I understand it may seem complex, but having a basic understanding of rxjs operators is essential for working with Angular

Answer 2

Avoid using async await, opt for switchMap rxjs operators

this.api.getMatches()).pipe(switchMap((data:any)=>{
   this.matchId =data.items[0].match_id;
   return this.api.getMatchStats(this.matchId)
})).subscribe((data: any) => {
      this.latestMap = data.rounds.round_stats['Map'];
});

Angular is brimming with Observables, utilizing rxjs operators allows us to transform / join /delay... observables. They require us to think in an "async way", which can be challenging but highly beneficial. Some of the key rxjs operators (though not limited to) include:

forkJoin: joining multiple observables and waiting until all are completed
switchMap: transforming one observable into another that depends on the first
map: transforming the response of an Observable
merge: creating an observable that emits a value each time one of several observables emit a value

I understand it may seem complex, but having a basic understanding of rxjs operators is essential for working with Angular

Answer 3

Answer №2

Start by making your initial call to this.api.getMatches() using the following structure:

myObservable.subscribe(
  x => console.log('Observer received a next value: ' + x),
  err => console.error('Observer encountered an error: ' + err),
  () => console.log('Observer received a complete notification')
);

After completing that, place your second call within the onComplete statement as shown below

() => {
    (this.api.getMatchStats(this.matchId)).subscribe((data: any) => {
      this.latestMap = data.rounds.round_stats['Map']
    })
}

Your code should appear like this afterwards

this.api.getMatches().subscribe(
  data => this.matchId = data.items[0].match_id;,
  err => console.error('Observer encountered an error: ' + err),
  () => {this.api.getMatchStats(this.matchId)).subscribe(
         data => {this.latestMap = data.rounds.round_stats['Map']}
        )}
);

That should do the trick. :)

Answer 4

Start by making your initial call to this.api.getMatches() using the following structure:

myObservable.subscribe(
  x => console.log('Observer received a next value: ' + x),
  err => console.error('Observer encountered an error: ' + err),
  () => console.log('Observer received a complete notification')
);

After completing that, place your second call within the onComplete statement as shown below

() => {
    (this.api.getMatchStats(this.matchId)).subscribe((data: any) => {
      this.latestMap = data.rounds.round_stats['Map']
    })
}

Your code should appear like this afterwards

this.api.getMatches().subscribe(
  data => this.matchId = data.items[0].match_id;,
  err => console.error('Observer encountered an error: ' + err),
  () => {this.api.getMatchStats(this.matchId)).subscribe(
         data => {this.latestMap = data.rounds.round_stats['Map']}
        )}
);

That should do the trick. :)

Answer 5

Answer №3

Let's stick to the basics :)

Grabbing the match ID using: 
this.matchId = (await this.api.getMatches()).items[0].match_id;

Getting the latest map info with:
this.latestMap = (await 
  this.api.getMatchStats(this.matchId)).rounds.round_stats['Map'];

Answer 6

Let's stick to the basics :)

Grabbing the match ID using: 
this.matchId = (await this.api.getMatches()).items[0].match_id;

Getting the latest map info with:
this.latestMap = (await 
  this.api.getMatchStats(this.matchId)).rounds.round_stats['Map'];

What is the best way to ensure that the second http call only runs after the first http call has completed, and passing an argument retrieved from the first call to the

Answer №1

Answer №2

Answer №3

Similar questions

Working with objects in *ngFor in Ionic 2

Opt for ion-select with a range of i to j options

Unable to run the command npm run env:restart

Memory Leak in Angular's Chain of mergeMap and concatMap Functions

What is the predefined value for a multi-select generated by the ng-for directive in Angular?

Stop the ion-fab-list from automatically closing when an element is selected within it

The variable "theme" is referenced prior to being initialized

Generating dynamically loaded components in Angular 2 with lazy loading

Angular - Modify the Background Color of a Table Row Upon Button Click

Typescript counterpart of a collection of key-value pairs with string keys and string values

Ways to assign values to an array within an object

What is the reason that the css backdrop-filter: blur() is functioning properly everywhere except on the active bootstrap-4 list-group-item?

Angular Observable does not reflect updates automatically

What is the best way to extract data from a text file that contains multiple data entries separated by pipes (|) using the fs module?

Understanding how to retrieve the value count by comparing strings in JavaScript

Building a custom user authentication system using Angular, Firebase, and Google authentication

An issue has occurred: Cannot access the properties of an undefined object (specifically 'controls')

Issue: An object with keys {} is not suitable as a React child, causing an error

Unable to iterate through elements when utilizing an external library: Incompatible types, 'Element[]' cannot be assigned to type 'string'

Color changes on mat-calendar when hovering