天気予報マップapiを使用してAngular 2で天気予報アプリを作成しようとしています。私はHttpModuleをapp.module.tsの中にインストールしています。私はまた、app.component.tsでHttpをインポートしています。ここで私はプログラムを実行しています。Angular 2のJSONオブジェクトにアクセスできませんか?
たとえば、ヒューストンの天気の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
しかし私は動作しないdata._bodyを使用して(例えば、等座標、温度、など)_body内部パラメータにアクセスする必要があります。 私はAngularを初めて使用しており、ajaxメソッドを使用したvanilla javascriptでAPIを呼び出すのに慣れています。