ERROR TypeError: Cannot set property 'property' of undefined

Question

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)

Answer 1

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.