Iterate through an array of objects Angular 2

Question

I have an array of objects received in service file from a json file. When I subscribe it in the component and try to iterate through it, I am getting the 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
        at FleetSummaryComponent.ngOnChanges (fleetSummaryComponent.ts:62)
        at DebugAppView._View_FleetControlPanelComponent2.detectChangesInternal (FleetControlPanelComponent.template.js:755)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectContentChildrenChanges (view.ts:261)
        at DebugAppView._View_FleetControlPanelComponent0.detectChangesInternal (FleetControlPanelComponent.template.js:326)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectViewChildrenChanges (view.ts:267)
        at DebugAppView._View_FleetOperateComponent2.detectChangesInternal (FleetOperateComponent.template.js:891)

TypeError: Cannot read property 'length' of undefined
    at FleetSummaryComponent.ngOnChanges (http://localhost:3000/app/dashboard/features/fleet/fleetSummary/fleetSummaryComponent.js:46:41)
    at DebugAppView._View_FleetControlPanelComponent2.detectChangesInternal (FleetControlPanelComponent.template.js:755:61)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37)
    at DebugAppView._View_FleetControlPanelComponent0.detectChangesInternal (FleetControlPanelComponent.template.js:326:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:220:34)
    at DebugAppView._View_FleetOperateComponent2.detectChangesInternal (FleetOperateComponent.template.js:891:8)

Can someone tell me, what is the mistake or is there any other way to iterate? Thanks

Service file

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from '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} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {FleetSummaryService} from './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 to loop the products in product service file and disply in html
    constructor(private _fleetSummaryService: FleetSummaryService){


    }
    // render something initially 
    ngOnInit(): void {



    }
    // render something 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)

                for (var i = 0; i < 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;
                    }
         }

    }

}

eko · Accepted Answer · 2016-05-28 20:21:55Z

8

You have an asynchronous method here:

   this._fleetSummaryService.getFleetSummary()
             .subscribe(
                 fleetSummary => this.summary = fleetSummary,

                 error => this.errorMessage = <any>error)

and after this you are trying to iterate over it here:

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

Your code will be in the for loop before the response from your subscription arrives. Hence this.summary will be undefined.

If you want to iterate through the response when it arrives you should move your for loop inside the callback like this:

 this._fleetSummaryService.getFleetSummary()
             .subscribe(
                 (fleetSummary) => {
                      this.summary = fleetSummary;
                      console.log(" fleet summary:  ", this.summary);

                      for (var i = 0; i < 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);

edited May 28, 2016 at 20:21

answered May 28, 2016 at 20:11

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Ram Over a year ago

Hi echonax, can you suggest a solution? Thanks

Collectives™ on Stack Overflow

Iterate through an array of objects Angular 2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related