CODEWITHSUNDEEP
angulartypescriptgetangular2-observables
R2B Boondocks
R2B Boondocks

Reputation: 414

Angular 2 - Cannot bind data from HTTP Get request

I'm new to Angular 2 and having trouble binding some JSON data. If I run the API url in a new tab I can see the returned JSON, just not via my application. Below are my service, component, & view files.

Service.ts

 public permission(module: string): Observable<Permissions[]> {
    return this.http
    .get('api-url')
    .map((response: Response) => {
       return <Permissions[]>response.json();
       })
}

Component.ts

_permissionsView: Permissions[];

ngOnInit() {
    this.getPermissions();
}

getPermissions() {
    this._commonService.permission('module')
    .subscribe(
        resultsArray => {
            this._permissionsView = resultsArray;
            console.log(this._permissionsView);
        },
        error => {"Error: " + error }
    )
}

Component.html

<kendo-grid [kendoGridBinding]="_permissionsView">
            ....
</kendo-grid>

Am I subscribing incorrectly?

Upvotes: 0

Views: 1718

Answers (2)

wFitz
wFitz

Reputation: 1286

Here is a working example I just wrote using Kendo UI.

It simulates the web api call returning a observable with a delay of 1000

https://stackblitz.com/edit/angular-kendo-datagrid-example

Upvotes: 0

wFitz
wFitz

Reputation: 1286

This works for me :

In the service

constructor( private http: HttpClient ) {}

getPermissions( params ) {

   const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Accept', 'application/json')

   const url = 'http://localhost:5000/api/'  

   return this.http.get(
      url + 'permissions',
      { headers: headers }
   );        
}

In the controller

this.dataService.getPermissions(param).subscribe( 
   data => {
      console.log('data OK !');
      console.log(data);
      this._permissionsView = data;
   },
   error => {
      console.log('data error !');
   }
);

I don't know what is kendo grid expecting for dataSource, did you try wrapping the "kendo grid selector" in a div with a *ngIf="_permissionsView" ? so it gets rendered after your http call completes.

Upvotes: 1

Related Questions