2017-10-21 1 views
0

오픈 날씨지도 API를 사용하여 각도 2로 날씨 앱을 만들려고합니다. 내 애플 리케이션에 app.module.ts에 HttpModule이 설치되어있다. 또한 app.component.ts에서 Http를 가져 와서 프로그램을 실행하고 있습니다.Angular 2로 JSON 객체에 액세스 할 수 없습니까?

예를 들어 Houston의 날씨에 대한 json 데이터를 얻고 싶습니다. 내 코드는 다음과 같습니다 :

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) 
} 

그러나 getData() 함수를 실행하면 콘솔에 실제로 예상 한 내용이 표시되지 않습니다.

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 

I는하지만 작동하지 data._body 사용 (등과 좌표, 온도 등) _body 내부 파라미터에 액세스 할 필요가있다. 저는 Angular를 처음 접했고 바닐라 자바 ​​스크립트에서 API를 호출하는 데 익숙합니다. 여기서 나는 ajax 메서드를 사용했습니다.

답변

1

오래된 Http 서비스 그러므로 당신은 당신의 응답에 .json() 전화를해야, 콘텐츠 유형을 추측하려고하지 않습니다 더 이상 필요하지 않을 것 새로운 HttpClient 서비스와

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

합니다.