To to link do maps.googleapis.com . Dostajesz informacje o szerokościach i długości geograficznej w adresie URL.

Muszę przeczytać tego JSON za pomocą maszynopisów i kanciąt2.

Próbowałem wielu różnych sugestii Google i (m.in.) następującego kodu (sugerowany przez kątową na Ten 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));

Ale kiedy debuguję się w Chrome, metoda "Data wyodrębniania" nie działa. Wydaje się, że link Googleapis nie jest JSON z jakiegoś powodu

Co muszę zrobić, aby przeczytać JSON?

0
willemjan92 17 luty 2017, 16:47

2 odpowiedzi

Najlepsza odpowiedź

Powinieneś utworzyć usługę , która sprawia, że http.get , aby uzyskać dane, podobnie do:

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

}

Fajne, teraz masz usługę , która otrzymuje dane, które są również wtryskiwalne . Możesz wstrzyknąć tę usługę w każdych życzonych konsumentom, a spożywają dane. To jest podobne do:

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

  }

}

Mam nadzieję, że to pomoże -> powinno to dać ci solidny punkt wyjścia.

Co faktycznie się nie sprawdziłem, jest mapowanie między odpowiedzią DataService.getall () Wewnątrz konsument do rzeczywistej właściwości składnika GMapsdata, ale powinieneś być w stanie wywnioskować, jak przechowywać go z konsola.log (odpowiedź);

1
flashjpr 17 luty 2017, 14:01

Używasz zły kodu w swoim extractData. Jak widać w odpowiedzi JSON:

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

Ma results, a nie data.

Więc powinno być:

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

Więc następujące powinny działać dobrze (przy użyciu URL statycznego w tym przykładzie):

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

Pamiętaj, aby zawsze subscribe, aby uzyskać odpowiedź. I rozważ tworzenie usługi, w której wykonujesz połączenia HTTP i map, a następnie w komponencie wywołaj tę metodę serwisową i subskrybuj wyniki!

I dobrze jest sprawdzić kartę sieciową i zobacz, jak wygląda odpowiedź, i sprawdzić, czy w ogóle otrzymasz odpowiedź.

Mam nadzieję że to pomoże! :)

0
AJT82 17 luty 2017, 15:14