Exploring the Depths of Angular 4 - Understanding Observables

Question

Exploring the Depths of Angular 4 - Understanding Observables

In my code, I have a function where I need to assign a specific value returned from an HTTP service to a member variable.

calculateDistance() {
for (var ix=0; ix<this.rps.length; ix++) {
  this.googleService._distanceBetween(this.myLatLng, this.rps[ix].latLng)
  .subscribe(response => {
    this.resp = <GeoResponse>response;
    this.rps[ix].distFromMe = this.resp.distance.toString();
  });
}

}

The issue I'm facing is that I can't access the array named rps within the observable.

Is there a different way to solve this problem?

angular typescript

Answer 1

Answer №1

The problem arises from the declaration of the forLoop index 'ix' using 'var'. Since it is declared with 'var', its scope is maintained and the value of 'ix' will be (this.rps.length + 1) when the callback to subscribe is executed. For example, if the array length is 5, the value of ix will be 6 at the time of the callback. This results in an error because this.rps[ix] is undefined. To fix this issue, adjust the forLoop like so:

for (var ix=0; ix<this.rps.length; ix++) {
//create an inner function to keep the closure for ix;
  ((index: number) => {
    this.googleService._distanceBetween(this.myLatLng, this.rps[index].latLng)
    .subscribe(response => {
      this.resp = <GeoResponse>response;
      this.rps[index].distFromMe = this.resp.distance.toString();
    });
  })(ix); // calls the created function
}

Answer 2

The problem arises from the declaration of the forLoop index 'ix' using 'var'. Since it is declared with 'var', its scope is maintained and the value of 'ix' will be (this.rps.length + 1) when the callback to subscribe is executed. For example, if the array length is 5, the value of ix will be 6 at the time of the callback. This results in an error because this.rps[ix] is undefined. To fix this issue, adjust the forLoop like so:

for (var ix=0; ix<this.rps.length; ix++) {
//create an inner function to keep the closure for ix;
  ((index: number) => {
    this.googleService._distanceBetween(this.myLatLng, this.rps[index].latLng)
    .subscribe(response => {
      this.resp = <GeoResponse>response;
      this.rps[index].distFromMe = this.resp.distance.toString();
    });
  })(ix); // calls the created function
}

Exploring the Depths of Angular 4 - Understanding Observables

Answer №1

Similar questions

Accessing URLs directly with the Angular 2 Router

Establishing fixed values in an angular2 component

Enhance the angular 2 dependencies within the angular2-cli project

Having difficulty retrieving a JSON Object value through an angular2 pipe

Node.js backpressure with RXJS and PostgreSQL

Using untyped JavaScript NPM modules in TypeScript for node: A beginner's guide

Displaying Images in Bootstrap 4 Grid with Angular 7 Conditional Rendering

Unable to showcase a dynamic image using [style.background-image] in Angular 7

Why does the name not appear when I first click the button, only 'emit'?

Using TypeScript to eliminate duplicate values when constructing an array with various properties

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Unable to access the inner object using key-value pair in Angular when working with Firebase

Exploring the utilization of async and await within NGRX effect in Angular

Jest unit tests are failing due to an error stating that VUE_APP_CONFIG is not defined

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

The art of connecting Angular resolvers

How to identify alterations in user input within Angular?

Transforming functions into a new typed object with different function signatures

A TypeScript interface can inherit from either one of two other interfaces

Is it possible to replace checkboxes with dropdowns in the NG-ZORRO Tree component?