无法访问 Angular 2 中的 JSON 对象？

Question

我正在尝试使用开放天气图 api 在 Angular 2 中制作一个天气应用程序。我在 app.module.ts 的应用程序中安装了 HttpModule。我还在 app.component.ts 中导入了 Http，我是运行程序。

例如，我想获取休斯顿天气的 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=hiddenforWhosebug').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

我需要访问 _body 中的参数（例如坐标、温度等）但是使用 data._body 不起作用。我是 Angular 的新手，习惯于在 vanilla javascript 中调用 API，我在其中使用了 ajax 方法。

Answer 1

旧的 Http 服务不会尝试猜测内容类型，因此您必须在响应时调用 .json()：

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

使用不再需要的新 HttpClient 服务。

无法访问 Angular 2 中的 JSON 对象？

Can't access JSON object in Angular 2?

angular-http

angular