Cant Bind JSON data to View in Angular2 nativescript

Question

I Have called a API and returned data successfully. But with that JSON data, I cant bind with the view. Below is the HTML Template

<StackLayout>            
        <Label [text]="users.BookingReferenceID"> </Label>
</StackLayout>

This is my app.component.ts

this._dataService.Search(id)            
            .subscribe((data) => this.users = JSON.stringify(data),
             error => console.log(error),
             () => {(
                   console.log('Data Retrieved successfully' + this.users))   
             });

This is the data returned from the api

{"Collection":  
 [{"IsIndexData":false,
"DocumentNumber":"2300000002018",
"BookingReferenceID":"CID0EX",
"IssuingDate":"2016-11-04T00:00:00",
"Errors":null,"Information":null,
"Warnings":null}],
"Errors":null,
"Information":null,
"Warnings":null}

Always I will get undefined in the view..Please help me

eko · Accepted Answer · 2016-12-24 16:59:17Z

1

You are JSON.stringifying the data which means that you are turning your data object into a string and inside the html you are trying to select the strings field like an object.

Remove the JSON.stringify from data.

Leave it like this:

.subscribe((data) => this.users = data,

And your html should be something like:

<StackLayout>            
        <Label [text]="users?.Collection[0].BookingReferenceID"> </Label>
</StackLayout>

edited Dec 24, 2016 at 16:59

answered Dec 24, 2016 at 16:49

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

5 Comments

Rajiv Krishnaa Over a year ago

I have tried this...But still im getting this exception

Rajiv Krishnaa Over a year ago

Error in ./AppComponent class AppComponent - inline template:3:19 caused by: Cannot read property 'BookingReferenceID' of undefined

eko Over a year ago

@RajivKrishnaa What does .subscribe((data) => console.log(data) logs?

Rajiv Krishnaa Over a year ago

In my log, it displays [object Object]

eko Over a year ago

@RajivKrishnaa Glad I could help :)

Collectives™ on Stack Overflow

Cant Bind JSON data to View in Angular2 nativescript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related