2016-08-27 7 views
-1

私は、アドレスを入力として受け取り、google geocodeapiを使用してそのアドレスの緯度と経度を返す簡単なWebページを作成しています。私は結果を処理することができません。特定の要素、つまりGoogleから返信されるJSONから緯度と経度を選択したいと考えています。私はJSONに新しいです。ここでJSON次のとおりです。javascriptを使用したJSON解析で返される[オブジェクトオブジェクト]

{ 
    "results" : [ 
    { 
     "address_components" : [ 
     { 
      "long_name" : "Jabalpur", 
      "short_name" : "Jabalpur", 
      "types" : [ "locality", "political" ] 
     }, 
     { 
      "long_name" : "Jabalpur", 
      "short_name" : "Jabalpur", 
      "types" : [ "administrative_area_level_2", "political" ] 
     }, 
     { 
      "long_name" : "Madhya Pradesh", 
      "short_name" : "MP", 
      "types" : [ "administrative_area_level_1", "political" ] 
     }, 
     { 
      "long_name" : "India", 
      "short_name" : "IN", 
      "types" : [ "country", "political" ] 
     }, 
     { 
      "long_name" : "482001", 
      "short_name" : "482001", 
      "types" : [ "postal_code" ] 
     } 
     ], 
     "formatted_address" : "Jabalpur, Madhya Pradesh 482001, India", 
     "geometry" : { 
     "bounds" : { 
      "northeast" : { 
      "lat" : 23.246354, 
      "lng" : 80.08003219999999 
      }, 
      "southwest" : { 
      "lat" : 23.1050362, 
      "lng" : 79.85747339999999 
      } 
     }, 
     "location" : { 
      "lat" : 23.181467, 
      "lng" : 79.98640709999999 
     }, 
     "location_type" : "APPROXIMATE", 
     "viewport" : { 
      "northeast" : { 
      "lat" : 23.246354, 
      "lng" : 80.08003219999999 
      }, 
      "southwest" : { 
      "lat" : 23.1050362, 
      "lng" : 79.85747339999999 
      } 
     } 
     }, 
     "place_id" : "ChIJfam2DxqugTkRueNDvBYGAkQ", 
     "types" : [ "locality", "political" ] 
    } 
    ], 
    "status" : "OK" 
} 

と私のコード:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Geocode</title> 
</head> 
<body> 
Enter Address<input type="text" id="UserInput"> 
Go<input type="button" onclick="geoCode()"> 

<script> 

    function geoCode(){ 

     var UserInput = document.getElementById('UserInput').valueOf(); 
     var xmlhttp = new XMLHttpRequest(); 
     var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU'; 
     var myArr; 

     var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey; 

     var xhr = new XMLHttpRequest(); 
     xhr.open('GET',url,true); 
     xhr.send(); 

     xhr.onreadystatechange = processRequest; 

     function processRequest() { 
      if(xhr.readyState==4 && xhr.status==200) 
      { 
       var response = JSON.parse(xhr.responseText); 
       alert(response["results"][0][0]); 
      } 
     } 
    } 

私はJSON.stringify()を試してみましたが、それは、応答からすべてのデータを出してくれる。 JSONからその特定の要素を選択するにはどうすればよいですか?助けてください

+1

回答["results"] [0] 'は配列ではありませんので、response [" results "] [0] [0]'は 'undefined'です。なんでしょう? – Leo

+0

この関数は、JSONの文字列表現をJSONオブジェクトに変換するために使用されるため、受信した応答を解析しないでください(JSON.parse)。あなたが必要とするのは、 'result [0] .formatted_address'が' 'Jabalpur、Madhya Pradesh 482001、India ''を返すような、そのパスで要素にアクセスすることです。 – FDavidov

答えて

1
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Geocode</title> 
</head> 
<body> 
Enter Address<input type="text" id="UserInput"> 
Go<input type="button" onclick="geoCode()"> 

<script> 

    function geoCode(){ 

     var UserInput = document.getElementById('UserInput').valueOf(); 
     var xmlhttp = new XMLHttpRequest(); 
     var ApiKey = 'AIzaSyDZP2E_5LLE6VOwIbrNImS32sAx5rsgEbU'; 
     var myArr; 

     var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+UserInput.value+'&key='+ApiKey; 

     var xhr = new XMLHttpRequest(); 
     xhr.open('GET',url,true); 
     xhr.send(); 

     xhr.onreadystatechange = processRequest; 

     function processRequest() { 
      if(xhr.readyState==4 && xhr.status==200) 
      { 
       var response = JSON.parse(xhr.responseText); 
       alert(response.results[0].geometry.location.lat + " " + response.results[0].geometry.location.lng); 
      } 
     } 
    } 
関連する問題