CODEWITHSUNDEEP
angularnativescript
Rajiv Krishnaa
Rajiv Krishnaa

Reputation: 99

Cant Bind JSON data to View in Angular2 nativescript

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

Upvotes: 1

Views: 510

Answers (1)

eko
eko

Reputation: 40647

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>

Upvotes: 1

Related Questions