I am currently following the pattern outlined in the hero.service.ts file, which can be found at this link: https://angular.io/docs/ts/latest/guide/server-communication.html
The Observable documentation I referenced is available here:
When examining my code in ApplicationsIndex.ts, I encountered an error at a specific line that reads as follows: "Object doesn't support property or method 'forEach'". Despite receiving data from my API server successfully, it seems that the collections object containing methods like find and forEach is not functioning properly. Although rxjs appears to be loading correctly since .map works without issues, I am unsure of what mistake I might have made.
In sysemjs.config.json:
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
In main.ts:
import 'rxjs/Rx';
//...
Within ApplicationsIndex.ts:
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { PermissionsService} from '../services/permissionsService';
import { Application } from '../model/Application';
@Component({
selector: 'app-applications-index',
templateUrl: './app/permissions/applicationsIndex.html'
})
export class ApplicationsIndex implements OnInit
{
public Title: string;
public Applications: Application[];
constructor(private permissionsService: PermissionsService)
{
this.Title = 'This is rolesIndex';
}
ngOnInit()
{
this.permissionsService.GetApplications().subscribe(x => {
this.Applications = x;
this.Applications.forEach((app, index) => { // ****** ERROR HERE ******
alert(app.Name);
});
alert('get apps done');
});
}
}
In PermissionsService.ts:
GetApplications(): Observable<Application[]> {
let url = this.serviceURL + 'Permissions/GetApplications';
return this.http.get(url)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
if (res.status < 200 || res.status >= 300) {
throw new Error('Bad response status: ' + res.status);
}
let body = res.json();
return body.data || {};
}
private handleError(error: any) {
let errorMsg = error.message || 'Server error';
console.error(errorMsg);
return Observable.throw(errorMsg);
}