jsonコンテンツを取得するgoogle maps angular2

Question

thisはmaps.googleapis.comへのリンクです。 urlの緯度と経度に関するJSON情報を取得します。

このJSONは、TypescriptとAngular2を使用して読む必要があります。

私は別のGoogleの提案の多くを試してみましたが、（特に）（this link上の角度によって提案された）次のコード：

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || {}; 
} 
// this is fired when I click on my map, this.lat & this.lng are correctly filled 
getLongLatClick($event: any) { 
    this.lat = $event.coords.lat; 
    this.lng = $event.coords.lng; 
    this.url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+this.lat+','+this.lng+''; 

    console.log(this.http.get(this.url).map(this.extractData)); 

をしかし、私はクロームでデバッグするとき、「extractData」Methodeのにはありません実行します。何かの理由でgoogleapisリンクがJSONではないようです

JSONを読むには何が必要ですか？

Answer 1

あなたに似たデータ、取得するためにhttp.getを作るサービス作成する必要があります。

import { Injectable } from '@angular/core'; 
import {Headers, Response, Http, RequestOptions} from "@angular/http"; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class DataService{ 

    private gmapsUrl: string = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=52.48278022207823,6.15234375'; 

    constructor(private http: Http) {}; 

    getAll() { 
    return this.http.get(this.gmapsUrl).map((response: Response) => response.json()); 
    } 

} 

クールを、今、あなたは、データを取得するサービスを、持っていますまた、注射剤。このサービスは、あなたが希望する任意の消費者に注入することができ、はのデータを消費します。これは次のようなものです：

import {Component, OnInit, ElementRef} from '@angular/core'; 
import {DataService}  from "path"; 

@Component ({ 
    moduleId: module.id, 
    selector: 'custom', 
    templateUrl: //your metadata, 
    styleUrls: //your metadata 
}) 

export class ConsumerComponent implements OnInit{ 

    gmapsData: any = [];  

    constructor(private dataService:Data) {} 

    ngOnInit(): void {} 

    private loadAllUsers() { 
    this.dataService.getAll().subscribe(response=> { 
     console.log(response.results); // 
     this.gmapsData = response; 
    }); 

    } 

} 

希望すると、これはあなたにしっかりとした出発点です。私は実際にチェックしていません何

は、コンソールからそれを格納する方法を推測する実際のコンポーネントのプロパティgmapsDataへの消費者は、しかし、あなたはできるはずです内部dataService.getAll（）の応答との間のマッピングであります.log（レスポンス）;

Answer 2

extractDataで間違ったコードを使用しています。あなたはJSON応答で見ることができるように：

{ 
    "results" : [ 
     { 
     "address_components" : [ 
      { 
       "long_name" : "20", 
       "short_name" : "20", 
       "types" : [ "street_number" ] 
      } 
    ....... 

をそれがresults、ないdataを持っています。

だから、次のようになります。

private extractData(res: Response) { 
    let body = res.json(); 
    return body.results || {}; 
} 

だから、次は（この例では、静的なURLを使用して）正常に動作する必要があります：

this.http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng=52.48278022207823,6.15234375') 
    .map(this.extractData) 
    .subscribe(data => console.log(data)) 

あなたの応答を取得するために、常にsubscribeに覚えておいてください。そして、あなたはhttp-callsとmapを実行し、コンポーネント呼び出しでそのサービスメソッドを呼び出し、結果をサブスクライブするサービスを作ることを検討してください！

そして、ネットワークタブをチェックしてレスポンスがどのようになっているかを確認し、レスポンスがまったく得られているかどうかを確認することをお勧めします。

希望すると便利です。 :)