While attempting to display a data table in Angular JS, an issue arose where the table showed no available data despite there being 4 records present. Refer to the screenshot below for visual reference.
https://i.sstatic.net/hdaW9.png
This is the approach I took:
user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserModel } from './user-model';
import { UserService } from './user.service';
declare var $ :any;
@Component({
selector: 'user-page',
template: require('./user.component.html'),
providers: [ UserService ]
})
export class UserComponent implements OnInit {
data: any;
errorMessage: string;
constructor(private userService:UserService){ }
ngOnInit() {
this.getUsers();
}
getUsers() {
this.userService.getUsers()
.subscribe(
users => {this.data = users;
$(function(){
$("#user-table").DataTable();
});
},
error => this.errorMessage = <any>error);
}
}
user.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { UserModel } from './user-model';
@Injectable()
export class UserService {
private usersUrl = 'http://localhost/larang/public/api/users';
constructor (private http: Http) {}
getUsers(): Observable<UserModel[]> {
return this.http.get(this.usersUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) { console.log(error);
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
user.component.html
<table id="user-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Added On</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.added}}</td>
</tr>
</tbody>
</table>
this.data contains the following information:
[
{"name":"John Doe","email":"john.doe@example.com","added":"2017-04-26"},
{"name":"Ramkishan","email":"ramkishan@example.com","added":"2017-04-26"},
{"name":"Jason Bourne","email":"jason.bourne@example.com","added":"2017-04-26"},
{"name":"RK","email":"rk@example.com","added":"2017-04-26"}
]
If you have insights on what might be causing the issue or suggestions for improvement, it would greatly benefit newcomers like myself in the field of Angular JS. Thank you for your support.