2017-10-21 7 views
0

J'essaie de faire une application météo en Angulaire 2 en utilisant la carte météo ouverte api. J'ai le HttpModule installé dans mon application, dans app.module.ts. J'ai également importé Http dans app.component.ts où j'exécute le programme. Par exemple, je veux obtenir les données json pour la météo à Houston. mon code est le suivant:Impossible d'accéder à l'objet JSON dans Angular 2?

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 


export class AppComponent implements OnInit { 
newdata; 

constructor (private http: Http) {} 

ngOnInit(): void{ 
    this.http.get('http://api.openweathermap.org/data/2.5/weather?q=houston&units=imperial&APPID=hiddenforstackoverflow').subscribe(data => { 
     this.newdata= data 
     }) 
} 

getData(){ 
    console.log(this.newdata) 
} 

Cependant en exécutant la fonction getData() la console ne montre pas vraiment ce que je m'attendais.

headers:Headers {_headers: Map(1), _normalizedNames: Map(1)} 
ok:true 
status:200 
statusText:"OK" 
type:2 
url:"http://api.openweathermap.org/data/2.5/weather?q=houston&units=imperial&APPID=d3758344ecd26680d1ae2845dcfbbaf7" 
_body:"{"coord":{"lon":-95.36,"lat":29.76},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":74.17,"pressure":1014,"humidity":83,"temp_min":73.4,"temp_max":75.2},"visibility":16093,"wind":{"speed":5.82},"clouds":{"all":75},"dt":1508550780,"sys":{"type":1,"id":2638,"message":0.1571,"country":"US","sunrise":1508588841,"sunset":1508629448},"id":4699066,"name":"Houston","cod":200}" 
__proto__:Body 

J'ai besoin d'accéder aux paramètres à l'intérieur _body (telles que les coordonnées, la température, etc.) mais en utilisant data._body ne fonctionne pas. Je suis nouveau à Angular et je suis habitué à appeler des API dans vanilla javascript, où j'ai utilisé la méthode ajax.

Répondre

1

l'ancien service Http ne pas essayer de deviner le type de contenu, donc vous devez appeler .json() sur votre réponse:

this.http.get('http://api.openweathermap.org/data/2.5/weather?q=houston&units=imperial&APPID=hiddenforstackoverflow').subscribe(data => { 
    this.newdata= data.json(); 
}) 

Avec le nouveau service HttpClient qui est plus nécessaire.