"Sequencing http.get requests in Angular 2 using

Question

"Sequencing http.get requests in Angular 2 using

In my service, I have a series of http.get requests structured as follows:

constructor(private http:Http) {}

getDetails(sysID:string){

var details;
this.http.get('https://blahURL').map(res => res.json().filter(f => f.id == another.id)[0]).subscribe(
    (data) => details = data,             // Executed if res.status >= 200 && <= 299
    (err) => console.log(err),            // Executed if request fails
    function(){                           // On completion

      console.log(this);

      this.http.get(...) //<- fails

Although the "on Completion" function is triggered, the this object logged in the console appears to be a SafeSubscriber instance, causing the subsequent http call using this.http to fail.

What could be the issue here?

angular http typescript rxjs

Answer 1

Answer №1

Utilize the arrow symbol to maintain the reference of this.

Exchange

function(){  // Upon finishing

  console.log(this);

  this.http.get(...) //<- fails

With

()=>{ // Upon completion

  console.log(this);

  this.http.get(...)

Answer 2

Utilize the arrow symbol to maintain the reference of this.

Exchange

function(){  // Upon finishing

  console.log(this);

  this.http.get(...) //<- fails

With

()=>{ // Upon completion

  console.log(this);

  this.http.get(...)

Answer 3

Answer №2

When you are inside the subscription function, the second instance of this no longer points to your original object.

To fix this issue, try creating a reference to it before making the initial http call. For example:

let self = this;

You can then use this reference self inside your subscription callback or error function like this:

self.http.get(..)

Answer 4

When you are inside the subscription function, the second instance of this no longer points to your original object.

To fix this issue, try creating a reference to it before making the initial http call. For example:

let self = this;

You can then use this reference self inside your subscription callback or error function like this:

self.http.get(..)

"Sequencing http.get requests in Angular 2 using

Answer №1

Answer №2

Similar questions

Seeking assistance with producing results

Book of Tales displaying Emotion Styling upon initial load only

Executing asynchronous function in Angular using Typescript

Encountering the error "TS(2604): JSX element type 'App' does not have any construct or call signatures" while trying to export an array of JSX Elements

Issue with loading React Router custom props array but custom string works fine

What steps should be taken to guarantee that the view is created only after receiving values from the route params subscription?

It seems that an error has occurred: DOMException was thrown because the attempt to run 'importScripts' on 'WorkerGlobalScope' has failed. The script located at 'http://localhost:4200/BlinkCardWasmSDK.js' was unable to load properly

Utilizing a powerful combination of Angular 5, PrimeNG charts, Spring Boot, and JHipster

Tips for manually inputting dates in Primeng Calendar Datepicker with the slash "/" symbol

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

Tips on ensuring a <video> element occupies the full height and width of the screen

Issues with loading Kendo ScrollView dynamically within an Angular ng-template

Arranging an array of objects in typescript with elements implicitly having an undefined type

Video player for Angular 2

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Leveraging File functionality in TypeScript

Is it recommended for TypeScript to automatically resolve the index.ts file as the default module file?

Check the status of a different website's online presence using JavaScript

Throttle the RxJs interval based on the inner observables

Import reactjs modules without the need for Browserify, Webpack, or Babel