I am attempting to retrieve a JSON file from a remote server. Here is the module I have written :
import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import './rxjs-operators';
@Component({
selector: 'map',
templateUrl: 'map/map.component.html'
})
@Injectable()
export class MapComponent{
private properties;
constructor(private http: Http){
this.properties = null;
}
ngOnInit(){
this.getPropertiesInTheArea();
}
getPropertiesInTheArea(){
let url = "https://raw.githubusercontent.com/sdeering/50-jquery-function-demos/cd89f8592b96d0a79c10aa64fa43c1bf01312643/data/data.json";
this.http.get(url)
.map(response => response.json())
.subscribe(
data => this.properties = data,
err => console.error(err),
() => console.log("Fetched Properties\n\n" + JSON.stringify(this.properties))
);
}
}
This module works well with fetching a local JSON file :
let url = "http://localhost:3000/map/data.json";
However, when attempting to fetch a remote resource (such as raw.githubusercontent.com), I encounter the following error in the console:
"EXCEPTION: [Exception... "" nsresult: "0x805e0006 ()" location: "JS frame :: http://localhost:3000/node_modules/zone.js/dist/zone.js :: scheduleTask :: line 1241" data: no]"
Unhandled Promise rejection: Exception { message: "", result: 2153644038, name: "", filename: "http://localhost:3000/node_modules/…", lineNumber: 1241, columnNumber: 0, data: null, stack: "scheduleTask@http://localhost:3000/…" } ; Zone: ; Task: Promise.then ; Value: Exception { message: "", result: 2153644038, name: "", filename: "http://localhost:3000/node_modules/…", lineNumber: 1241, columnNumber: 0, data: null, stack: "scheduleTask@http://localhost:3000/…" } undefined
Thank you for any assistance provided.