I have the following Angular example that gets a json document from https://raw.githubusercontent.com/angular/angular/master/bower.json and shows the response.toString() in a template like <h1>{{title}}</h1>
import {Component} from "@angular/core";
import {Http} from "@angular/http";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
// url = 'http://s331998788.online.de:5080/dict.json';
url = 'https://raw.githubusercontent.com/angular/angular/master/bower.json';
constructor(http: Http) {
let params: URLSearchParams = new URLSearchParams();
http.get(this.url).subscribe(t => this.title = t.toString());
}
}
t.toString() returns Response with status: 200 OK for URL: https://raw.githubusercontent.com/angular/angular/master/bower.json to {{title}}.
If instead I get the url http://s331998788.online.de:5080/dict.json it seems that t.toString() does not return nothing to {{title}} and the template simply displays app works!.
What is wrong with this json document?
The relevant difference seems to me that the working page has Access-Control-Allow-Origin: * and the other not. If this is the source of the problem, how can I tell http to get also those documents?
Asking the header infos with curl -i we get the following:
$ curl -i 'http://s331998788.online.de:5080/dict.json'
HTTP/1.1 200 OK
Server: Zope/(2.13.21, python 2.7.5, linux2) ZServer/1.1
Date: Fri, 28 Apr 2017 23:01:32 GMT
Last-Modified: Fri, 28 Apr 2017 23:01:23 GMT
Content-Length: 46
Content-Type: application/json
Accept-Ranges: bytes
{
"name": "John",
"age": 21
}
$ curl -i 'https://raw.githubusercontent.com/angular/angular/master/bower.json'
HTTP/1.1 200 OK
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'
Strict-Transport-Security: max-age=31536000
X-Content-Type-Options: nosniff
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
ETag: "007371a434d2486e54fb403ff912ec202322d603"
Content-Type: text/plain; charset=utf-8
Cache-Control: max-age=300
X-Geo-Block-List:
X-GitHub-Request-Id: 2C5E:674E:431187:459555:5903C9F0
Content-Length: 89
Accept-Ranges: bytes
Date: Fri, 28 Apr 2017 23:02:09 GMT
Via: 1.1 varnish
Connection: keep-alive
X-Served-By: cache-hhn1523-HHN
X-Cache: MISS
X-Cache-Hits: 0
X-Timer: S1493420529.409818,VS0,VE110
Vary: Authorization,Accept-Encoding
Access-Control-Allow-Origin: *
X-Fastly-Request-ID: 9270c2ab79c2d179ec005957794044dc1796841b
Expires: Fri, 28 Apr 2017 23:07:09 GMT
Source-Age: 0
{
"name": "angular",
"dependencies": {
"polymer": "Polymer/polymer#^1.6.0"
}
}
The Http.get method returns a response object (as wannadream said in the comments).
http.get(this.url).subscribe(t => this.title = t.toString());
this shows the string representation of the response object, if you want to see the json, you have to either use t.text() (gets the raw text of the body) or t.json() (parses the raw text into an object).
You should add an error subscription to see why you don't have anything in title:
http.get(this.url).subscribe(t => this.title = t.toString(), error => console.error(error));