CODEWITHSUNDEEP
angular
Cristian Annicchiarico
Cristian Annicchiarico

Reputation: 5

ERROR TypeError: Cannot set property 'property' of undefined

my problem is created when i execute the method subscribe, and i don't understand why. This is the code and the error generates in console:

getInfo(idgestore:number){
    let zonaObs=this._zonaservice.getInfoParks(idgestore);
    zonaObs.subscribe(data=>{
      this.zones=data;
      var citta:string;
      for(var i=0;i<this.zones.length;i++){
        // this.zones[i].citta=null;
        this.location.lat=this.zones[i].latitudine;
        this.location.lng=this.zones[i].longitudine;
        this._zonaservice.getCity(this.location)
        .subscribe((data)=>{
          citta=data;
          })
        console.log(this.zones[i].id);
        var id_zona=this.zones[i].id;
        console.log(id_zona)
        this._tipologiazonaservice.getnumberTotal(id_zona)
        .subscribe((data)=>{
          this.zones[i].numero=data
        })
        console.log(this.zones)
      }
    });

  }

Error:

ERROR TypeError: Cannot set property 'numero' of undefined
    at SafeSubscriber._next (allinfopark.component.ts:44)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:83)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at XMLHttpRequest.onLoad (http.es5.js:1226)

Upvotes: 0

Views: 2029

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68655

Your problem is here. You are using the same i variable which is closure for the 

.subscribe((data)=>{
    this.zones[i].numero=data
})

means that it captures the i variable.

This code works asynchronously. Means that this subscribe will work, after the getNumberTotal is ready.

When your code runs first time, i is 0. It reaches to this line and pass this function to another thread (not Javascript thread) to run and continues. When it finishes its call, it waits until your Javascript Thread finishes it's code and after it you get for i the value this.zones.length. Event loop gets out the callbacks for the subscribes and see there a variable i which value is this.zones[this.zones.length] and when it tries to call this.zones[this.zones[this.zones.length]], it is undefined. So why you get an error.

Replace your var i definition with let i. It forces for loop for each iteration create it's own i variable, each subscribe has captures it's own i.

Upvotes: 1

Related Questions