AngularJS 2 - inner property data binding - EXCEPTION: TypeError: Cannot read property of undefined in

1,211 views
Skip to first unread message

karthik chinnayan

unread,
Feb 29, 2016, 12:09:17 AM2/29/16
to AngularJS
I am working on a AngularJS 2 app using Typescript. I am facing a problem where I cannot access a property defined in the Typescript class in the HTML page using data binding. I have included the relevant files below. Please let me know if I am missing something. I am looking at this one issue for more than 2 days now and I am out of ideas at present.

Typescript classes.

export class ApproveBooking {
constructor(
    public name: string,
    public form: DynamoForm,
    public cabBooking: CabBooking) {}
 }

export class DynamoForm {
constructor(
    public formFields: DynamoFormField[]) { }
 }

export class DynamoFormField {
constructor(
    public fieldName: string,
    public fieldId: string,
    public fieldLabel: string,
    public fieldType: string,
    public fieldValue: string,
    public required: boolean) { }
}

export class CabBooking {
constructor(
    public id: number,
    public bookingId: string,
    public status: string,
    public notes: string,
    public user: boolean,
    public travelDateString: string,
    public travelTimeString: string,
    public pickupLocation: string,
    public dropLocation: string,
    public approver: string,
    public approverAction: string,
    public approverComments: string,
    public approvedDate: string,
    public cabDriver: string,
    public cabDriverAssignedDate: string,
    public createdDate: string,
    public modifiedDate: string) { }
}

Service that fetches JSON data from server and assigns it to the 'ApproveBooking' class.

getSingleCabBookingForApproval(bookingId: string) {
    var accessToken = localStorage.getItem('cabservice_access_token');
    var approveUrl = this._appService.getAppUrl() + "/dynamo/api/cabservice/bookings/approve/" + bookingId + "?access_token=" + accessToken;

    return this._http.get(approveUrl)
        .map(res => {
            return <ApproveBooking> res.json();
        })
        .catch(this.handleError);
}

JSON value received from the server is below:

{
"name": "Name set in backend...",
"form": {
"formFields": [
  {
    "fieldName": "approverComments",
    "fieldId": "approverComments",
    "fieldLabel": "Approver Comments",
    "fieldType": "textarea",
    "fieldValue": "",
    "required": false
  },
  {
    "fieldName": "approverAction",
    "fieldId": "approverAction",
    "fieldLabel": "Approve Cab Request ",
    "fieldType": "radio",
    "fieldValue": [
      {
        "label": "Approve",
        "name": "approve",
        "selected": false
      },
      {
        "label": "Reject",
        "name": "reject",
        "selected": false
      }
    ],
    "required": false
  },
  {
    "fieldName": "approvedDate",
    "fieldId": "approvedDate",
    "fieldLabel": "Approved Date",
    "fieldType": "datetime-local",
    "fieldValue": "",
    "required": true
  }
]
},
"cabBooking": {
"id": 19,
"bookingId": "BId_1453269360424",
"status": "New",
"notes": null,
"user": "karthik",
"travelDate": 1453228200000,
"travelDateString": null,
"travelTimeString": null,
"pickupLocation": "velachery",
"dropLocation": "chennai one",
"approver": "sivaram",
"approverAction": null,
"approverComments": null,
"approvedDate": null,
"cabDriver": null,
"cabDriverAssignedDate": null,
"createdDate": 1453269360000,
"modifiedDate": 1453269360000
}
}

AngularJS component using the service method to populate one of its properties.

@Component({
templateUrl: 'app/approver/approver_approvebooking.html'
})
export class ApproveCabBookingComponent implements OnInit {
private errorMessage: string;
private approveBooking: ApproveBooking;

constructor(
    private _logger: Logger,
    private _router: Router,
    private _routeParams: RouteParams,
    private _cabBookingService: CabBookingService) { }

ngOnInit() {
    let bookingId = this._routeParams.get('bookingId');
    this._logger.log("bookingId = " + bookingId);

    this.approveBooking = this._cabBookingService.getSingleCabBookingForApproval(bookingId)
        .subscribe(
            approveBooking => {
                this.approveBooking = approveBooking;
                this._logger.log("this.approveBooking => " + JSON.stringify(this.approveBooking));
            },
            err => {
                this._logger.log("Error =>" + err.status + "," + JSON.stringify(err));
            },
            () => console.log('Approve Cab Booking Entity Fetched!');
            );
}
}

HTML template for the component:

<div class="col-md-12 title-panel">
<h3>Booking Status</h3>
</div>
<div class="col-md-12 content-panel">
<div class="row">
    <div class="col-md-12">
        <h4 class="label-heads">Booking ID</h4>
        <div class="form-value">
            <span>{{approveBooking.cabBooking.bookingId}}</span>
        </div>
    </div>
</div>
</div>

The problem I face is when I try to use the approveBooking's inner property in an HTML view, it throws up an error below.

TypeError: Cannot read property 'bookingId' of undefined in [{{approveBooking.cabBooking.bookingId}} in ApproveCabBookingComponent@8:10]

FYI, when I use a flat JSON data and a flat Typescript class, things are working as expected.

Günter Zöchbauer

unread,
Feb 29, 2016, 12:38:32 AM2/29/16
to AngularJS
Without reading all your code but seeing `approveBooking.cabBooking.bookingId` and `JSON` which is probably fetched from the server I guess you need


    approveBooking?.cabBooking.bookingId

or

    approveBooking?.cabBooking?.bookingId

This way `cabBooking` is only evaluated if `approveBooking` is != null.

The error happens when Angular tries to evaluate `approveBooking.cabBooking.bookingId` while `approveBooking` isn't yet set because the respone from the server han't yet arrived.

karthik chinnayan

unread,
Mar 4, 2016, 12:57:42 AM3/4/16
to AngularJS
Hello Gunter,
Thank you for the reply. I believe your answer is correct in the sense that the template was rendered even before the JSON was completely fetched. 

I will try your approach of using the '?' characters to handle situations like this.

Meanwhile, I addressed this problem by using the following approach.

export class ApproveCabBookingComponent implements OnInit {

private errorMessage: string;

private approveBooking: ApproveBooking;

private isDataAvailable: boolean;


constructor(

    private _logger: Logger,

    private _router: Router,

    private _routeParams: RouteParams,

    private _cabBookingService: CabBookingService) { 


    this.isDataAvailable = false;

}


ngOnInit() {

    let bookingId = this._routeParams.get('bookingId');

    this._logger.log("bookingId inside ngInit = " + bookingId);


    this.approveBooking = this._cabBookingService.getSingleCabBookingForApproval(bookingId)

        .subscribe(

            approveBooking => {

                this.approveBooking = approveBooking;

                this.isDataAvailable = true;

                this._logger.log("this.approveBooking => " + JSON.stringify(this.approveBooking));

            },

            err => {

                this._logger.log("Error while accessing approveBooking...error, JSONed = " + err.status + "," + JSON.stringify(err));

            },

            () => console.log('Approve Cab Booking Entity Fetched!');

            );

}

}


The corresponding view was updated to use the 'isDataAvailable' property set in the component.


<div *ngIf="isDataAvailable">

    <div class="col-md-12 title-panel">

        <h3>Manage Booking </h3>

    </div>

    <div class="col-md-12 content-panel">

        <form (ngSubmit)="onSubmit()">

            <div class="row">

                <div class="col-md-12">

                    <h4 class="label-heads">Booking ID</h4>

                    <div class="form-value">

                        <span>{{approveBooking.cabBooking.bookingId}}</span>

                    </div>

                </div>

            </div>

        </form>

    </div>

</div>


regards,

Karthik

Reply all
Reply to author
Forward
0 new messages