Having some trouble displaying data from a Web API in my component, can't seem to figure out what's missing.
The service call is successful (received a code 200 with all the applications) List of applications
However, I'm trying to display them in the console and it's not populating the table.
ngOnInit(){
this.getApplications();
console.log(this.applications);
}
getApplications() {
this.applications = [];
this._UCCXCiscoService.getApplications().subscribe(
res => {
this.applications = res;
},
error => this.errorMessage = <any>error
);
}
// Model
export interface Application {
self: string;
ScriptApplication: ScriptApplication;
id: string;
applicationName: string;
type: string;
description: string;
maxsession: number;
enabled: string;
}
export interface ScriptApplication {
script: string;
scriptParams: ScriptParam[];
}
export interface ScriptParam {
name: string;
value: string;
type: string;
}
export interface RootObject {
type: string;
application: Application[];
}
I believe my model is correct. Seems like there might be an issue with the getApplications() method, but I can't pinpoint why...
Appreciate any assistance,
Florian
EDIT 1 : Code for getApplications() method in my service
@Injectable()
export class UCCXCiscoService {
public headers:Headers = new Headers({ 'Content-Type': 'application/json' ,'Authorization': 'Basic User + mdp'});
constructor(private http: Http) {
}
getApplications() {
let options = new RequestOptions({ headers: this.headers });
return this.http.get('API URL', options)
.map(data => <Application[]> data.json().application)
.catch(this.handleError);
}
This method does work and returns the applications (shown in the image List of Applications). Omitted the api url and password for privacy reasons ^^'
EDIT 2 : getApplications() method in component and service response
EDIT 3 :
<div class="contentPage">
<div class="pageTitleHeaderContainer">
<div class="pageTitle">
<span>Cisco</span>
</div>
</div>
<div class="subContent">
<message-to-user messageToUser={{messageToUser}} messageLevel={{messageLevel}}></message-to-user>
<table class="table table-hover table-condensed">
<th>Id</th>
<th>Name</th>
<tr *ngFor="#application of applications">
<td>{{application?.id}}</td>
<td>{{application?.applicationName}}</td>
</tr>
</table>
</div>
</div>