Tengo el siguiente ejemplo de Angular que obtiene un documento json de https://raw.githubusercontent.com/angular/angular/master/bower.json y muestra la respuesta.toString() en una plantilla como <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() devuelve Response with status: 200 OK for URL: https://raw.githubusercontent.com/angular/angular/master/bower.json a {{title}} .
Si, en cambio, obtengo la URL http://s331998788.online.de:5080/dict.json , parece que t.toString() no devuelve nada a {{title}} y la plantilla simplemente muestra que la app works! .
¿Qué está mal con este documento json?
La diferencia relevante me parece que la página de trabajo tiene Access-Control-Allow-Origin: * y la otra no. Si esta es la fuente del problema, ¿cómo puedo decirle a http que obtenga también esos documentos?
Preguntando la información del encabezado con curl -i obtenemos lo siguiente:
$ 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" } }El método Http.get devuelve un objeto de respuesta (como dijo wannadream en los comentarios).
http.get(this.url).subscribe(t => this.title = t.toString()); esto muestra la representación de cadena del objeto de respuesta, si desea ver el json, debe usar t.text() (obtiene el texto sin formato del cuerpo) o t.json() (analiza el texto sin formato en un objeto).
Debe agregar una suscripción de error para ver por qué no tiene nada en el título:
http.get(this.url).subscribe(t => this.title = t.toString(), error => console.error(error));