Eckdaten von API funktioniert nicht wie erwartet

Question

Ich arbeite an einer Wetteranwendung auf Angular 4 und ich habe die Daten von einer API. Dies ist mein Code für die searvice, die die Daten aus der API

import { Injectable } from "@angular/core"; 
import { Http } from "@angular/http"; 
@Injectable() 

export class WeatherService{ 
    constructor(private http: Http){} 

    getWeather(location){ 
    return(this.http.get(`http://api.openweathermap.org/data/2.5`/weather?q=${location}&APPID=XXXXXXXXXXXXXXXXXXXXX`)); 
    } 
} 

Und in einer anderen Komponente für die Daten am anfordernden holt:

import { Component, OnInit } from '@angular/core'; 
import { WeatherService } from "../shared/services/weather.service"; 
import "rxjs/add/operator/map"; 
@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 
    private weatherdata; 
    constructor(private weatherService: WeatherService) { } 
    city = ""; 
    ngOnInit() { 
    } 

    getWeather():void{ 
    this.weatherService.getWeather(this.city) 
    .map((data) => data["_body"]) 
    .subscribe((data) => this.weatherdata = data); 
    } 
} 

Ich sehe alle Daten, wenn ich versuche zu console.log die Daten in der Zeichnung() Funktion als:

{"coord":{"lon":3.4,"lat":6.45},"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"base":"stations","main":{"temp":297.883,"pressure":1023.84,"humidity":100,"temp_min":297.883,"temp_max":297.883,"sea_level":1028.6,"grnd_level":1023.84},"wind":{"speed":4.16,"deg":240.504},"rain":{"3h":3.935},"clouds":{"all":92},"dt":1501330679,"sys":{"message":0.0021,"country":"NG","sunrise":1501306837,"sunset":1501351501},"id":2332459,"name":"Lagos","cod":200} 

, aber wenn ich {{weatherdata.name}} in meinem HTML sein leeren versuche Interpolation machen etwas falsch hier?

Answer 1

Was machst du jetzt, Sie den String-Wert Ihrer Antwort bekommen, wenn Sie Daten zu erhalten, wie so:

.map((data) => data["_body"]) 

Sie wollen die JSON statt:

.map((data) => data.json())