2014-02-12 3 views
1

Я пытаюсь вызвать элемент специфический (страну) из API, и я хочу его вернуть, как строки, я уточнить это ниже ВХОДвызова JSON элемент из API и возврата результата, как строки

USER, :
Нью-Йорк, Нью-Йорк, США

API используется:
http://maps.google.com/maps/api/js?sensor=true&libraries=places

Желаемый результат:
США/US/США

JSON-то не уверен, что это называется:
https://maps.googleapis.com/maps/api/geocode/json?address=New%20York,%20NY,%20United%20States&sensor=true

Я немного потерял о том, как это сделать, но это то, что я пробовал:

<html> 
<head></head> 
<title>Project 9</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#btn1 ").click(function() { 
     var address=encodeURI($('#userInput').val()); 
     var url='https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=true'; 
     $.getJSON(url, function(data){ 
      var shortname=data.results[0].address_components[3].short_name; 
      var longname=data.results[0].address_components[3].long_name; 
      alert(shortname+' '+longname); 
    }); 
    }); 
}); 
</script>   
<body> 
<input type="text" value="sdfasd" name="userInput" id="userInput" /> 
    <input type="button" id="btn1" value="Load Data" /> 
</body> 
</html> 

Я обновил этот вопрос, я ценю все ваших ответов, однако я заметил, что в некоторых источниках он не возвратит страну, но возвращает объект, который находится в индексе 3 адреса_компонентов, как мы можем ограничить его возвращением только страны? спасибо

Не может ли он работать следующим образом?

var shortname=data.results[0].address_components[country].short_name; 
    var longname=data.results[0].address_components[country].long_name; 
    alert(shortname+' '+longname); 
+0

Правильная оценка ответа также поможет другим. :) – Konza

ответ

2

передать URL-адрес, который возвращает json функции getJSON. данные параметров будут содержать ответ json, который вы получили от сервера.

Вы можете видеть, что оно содержит поле с именем «results», которое представляет собой массив. Поэтому возьмите данные. Результаты [0]. Внутри поля formatted_address содержится ваше значение.

var url = "https://maps.googleapis.com/maps/api/geocode/json?address=New%20York,%20NY,%20United%20States&sensor=true" 

$.getJSON(url, function(data) 
{ 
     alert(data.results[0].formatted_address) 

}); 
+0

Я отредактировал ответ с большим количеством объяснений. – Konza

2
<html> 
<head></head> 
<title>Project 9</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#btn1 ").click(function(event) { 
url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + 
encodeURI($('#userInput').val()) + '&sensor=true'; 
$.getJSON(url, function(data) 
{ 
    //here we process the json. and whatever we want after the call came back from api 
    // notice the data arg that i putted above. 
alert(data.results[0].address_components[2].short_name); 
// this will alert "US" 

}); 
}); 
}); 
</script>   
<body> 
<input type="text" value="New York, NY, United States" name="userInput" id="userInput" /> 
    <input type="button" id="btn" value="Load Data" /> 
</body> 

Приветствия.

0

Измените код, как показано ниже

$(document).ready(function() { 
    $("#btn1 ").click(function(event) { 
     var address=encodeURI($('#userInput').val()); 
     var url='https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=true'; 
     $.getJSON(url, function(data){ 
      var shortname=data.results[0].address_components[2].short_name 
      var longname=data.results[0].address_components[2].long_name 
      alert(shortname+' '+longname); 
    }); 
    }); 
}); 
0
<html> 
<head> 
<title>Project 9</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#btn1").click(function (event) { 
     // $.getJSON(url,data,success(data,status,xhr)) 
     var url = 'https://maps.googleapis.com/maps/api/geocode/json?sensor=true'; 
     var data = { address: 'New York,NY,United States'}; 
     $.getJSON(url, data, function (result) { 
      var components = result.results[0].address_components; 
      for (var i = 0; i < components.length; i++) { 
       var c = components[i]; 
       if (c.types && c.types.indexOf('country') >= 0) { 
        // long_name contains country long name and 'short_name' contains country's abbreviated name 
        console.log(c.long_name + '/' + c.short_name); 
        break; 
       } 
      }      
     }); 
    }); 
}); 
</script> 
</head> 

<body> 
    <input type="button" id="btn1" value="Load Data" /> 
</body> 

1

во-первых, прочитайте эту статью.

getJSON подписи, как:

jQuery.getJSON(url [, data ], callback); 

и обратного вызова подписи функции, как:

callback(data, textStatus, jqXHR); 
  • данных является желаемым объектом JSON
  • textStatus является строка для проверки состояния е Аякса запрос
  • jqXHR является фактическим Аякса объект запроса

Так что, если у вас есть данные, отправляемые в качестве строки запроса, как адрес в качестве параметра, вы можете отправить его люблю:

var url = "https://maps.googleapis.com/maps/api/geocode/json" 
var data = { 
    address: "New York, NY, United States", 
    sensor: true 
}; 
jQuery.getJSON(url, data, function(data, status, xhr){ 
    console.log(data.results); 
    for(var i=0;i<data.results.length;i++){ 
     var result = data.results[i]; 

     //all addresses as a string 
     console.log(result.formatted_address); 

     //info about your addresses which is an array 
     console.log(result.address_components); 

     console.log(result.geometry); 
     /*the result.geometry is like: 

     bounds: Object 
     location: Object 
     location_type: "APPROXIMATE" 
     viewport: Object 
      northeast: Object 
       lat: 40.9152555 
       lng: -73.700272 
      southwest: Object 
       lat: 40.496006 
       lng: -74.2557349 
     */ 

    } 
}) 
Смежные вопросы