angularjs - Iterate through an array of objects Angular 2 -

i have array of objects received in service file json file. when subscribe in component , try iterate through it, getting following error:

exception: error in app/dashboard/features/fleet/fleetcontrolpanel/fleetcontrolpaneltemplate.html:38:14browserdomadapter.logerror @ browser_adapter.ts:78browserdomadapter.loggroup @ browser_adapter.ts:89exceptionhandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:304schedulerfn @ async.ts:131safesubscriber.__tryorunsub @ subscriber.ts:240safesubscriber.next @ subscriber.ts:192subscriber._next @ subscriber.ts:133subscriber.next @ subscriber.ts:93subject._finalnext @ subject.ts:154subject._next @ subject.ts:144subject.next @ subject.ts:90eventemitter.emit @ async.ts:117ngzone._zoneimpl.ng_zone_impl_1.ngzoneimpl.onerror @ ng_zone.ts:138ngzoneimpl.inner.inner.fork.onhandleerror @ ng_zone_impl.ts:90zonedelegate.handleerror @ zone.js:327zone.runguarded @ zone.js:233ngzoneimpl.runinnerguarded @ ng_zone_impl.ts:100ngzone.runguarded @ ng_zone.ts:216outsidehandler @ dom_events.ts:16zonedelegate.invoketask @ zone.js:356zone.runtask @ zone.js:256zonetask.invoke @ zone.js:423 exception: typeerror: cannot read property 'length' of undefined  typeerror: cannot read property 'length' of undefined         @ fleetsummarycomponent.ngonchanges (fleetsummarycomponent.ts:62)         @ debugappview._view_fleetcontrolpanelcomponent2.detectchangesinternal (fleetcontrolpanelcomponent.template.js:755)         @ debugappview.appview.detectchanges (view.ts:243)         @ debugappview.detectchanges (view.ts:345)         @ debugappview.appview.detectcontentchildrenchanges (view.ts:261)         @ debugappview._view_fleetcontrolpanelcomponent0.detectchangesinternal (fleetcontrolpanelcomponent.template.js:326)         @ debugappview.appview.detectchanges (view.ts:243)         @ debugappview.detectchanges (view.ts:345)         @ debugappview.appview.detectviewchildrenchanges (view.ts:267)         @ debugappview._view_fleetoperatecomponent2.detectchangesinternal (fleetoperatecomponent.template.js:891)  typeerror: cannot read property 'length' of undefined     @ fleetsummarycomponent.ngonchanges (http://localhost:3000/app/dashboard/features/fleet/fleetsummary/fleetsummarycomponent.js:46:41)     @ debugappview._view_fleetcontrolpanelcomponent2.detectchangesinternal (fleetcontrolpanelcomponent.template.js:755:61)     @ debugappview.appview.detectchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)     @ debugappview.detectchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)     @ debugappview.appview.detectcontentchildrenchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37)     @ debugappview._view_fleetcontrolpanelcomponent0.detectchangesinternal (fleetcontrolpanelcomponent.template.js:326:8)     @ debugappview.appview.detectchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)     @ debugappview.detectchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)     @ debugappview.appview.detectviewchildrenchanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:220:34)     @ debugappview._view_fleetoperatecomponent2.detectchangesinternal (fleetoperatecomponent.template.js:891:8) 

can tell me, mistake or there other way iterate? thanks

service file

import {injectable} '@angular/core'; import {http, response} '@angular/http'; import {observable} 'rxjs/observable';  @injectable() export class fleetsummaryservice {      private url = 'app/dashboard/features/fleet/fleetcontrolpanel/fleetdatabase.json';      constructor(private _http: http){      }      getfleetsummary(): observable<any[]> {         return this._http.get(this.url)         .map((response: response) => <any[]>response.json())         .do(data => console.log("data received: " + json.stringify(data)))         .catch(this.handleerror);      }      private handleerror(error: response){         console.error(error)         return observable.throw(error.json().error || "server error");     } } 

component file

import {component, oninit, input, onchanges} '@angular/core'; import {router_directives} '@angular/router-deprecated'; import {fleetsummaryservice} './fleetsummaryservice';  @component({     selector: 'fleetsummary',     templateurl: 'app/dashboard/features/fleet/fleetsummary/fleetsummarytemplate.html',     directives: [router_directives]  })  export class fleetsummarycomponent implements oninit, onchanges {       fleetsummary: any[];    @input() selectedtruckid: any;    errormessage: any;    summary: any[];      // constructor loop products in product service file , disply in html     constructor(private _fleetsummaryservice: fleetsummaryservice){       }     // render      ngoninit(): void {        }     // render on constant changes     ngonchanges(): void{           console.log("data inside fleet summary:  ", this.selectedtruckid.fleetid)      this._fleetsummaryservice.getfleetsummary()              .subscribe(                  fleetsummary => this.summary = fleetsummary,                   error => this.errormessage = <any>error)                console.log(" fleet summary:  ", this.summary)                  (var = 0; < this.summary.length; i++) {                      var summarydata = this.summary[i];                    console.log(" fleet summary id:  ", summarydata.fleetid)                     if (summarydata.fleetid == this.selectedtruckid.fleetid) {                          this.fleetsummary = summarydata;                        console.log(this.fleetsummary);                         break;                      }else {                         this.fleetsummary = null;                     }          }      }  } 

you have asynchronous method here:

   this._fleetsummaryservice.getfleetsummary()              .subscribe(                  fleetsummary => this.summary = fleetsummary,                   error => this.errormessage = <any>error) 

and after trying iterate on here:

for (var = 0; < this.summary.length; i++) { 

your code in loop before response subscription arrives. hence this.summary undefined.

if want iterate through response when arrives should move loop inside callback this:

 this._fleetsummaryservice.getfleetsummary()              .subscribe(                  (fleetsummary) => {                       this.summary = fleetsummary;                       console.log(" fleet summary:  ", this.summary);                        (var = 0; < this.summary.length; i++) {                           var summarydata = this.summary[i];                          console.log(" fleet summary id:  ", summarydata.fleetid);                          if (summarydata.fleetid == this.selectedtruckid.fleetid) {                              this.fleetsummary = summarydata;                             console.log(this.fleetsummary);                             break;                           }else {                            this.fleetsummary = null;                          }                     }                  },                   error => this.errormessage = <any>error);