2016-12-18 6 views
0

国に関する情報を表示する簡単なAPIを使用しようとしています。 var apiCallでは、URLの最後に国をハードコードすることができ、getJSONメソッドは意図したとおりに機能し、情報を表示します。getJSON、呼び出し前にAPIコールのurl変数を変更する

var apiCall = "https://restcountries.eu/rest/v1/name/england"; 

$.getJSON(apiCall, function(data){ 

$("#country").html("Country Name: " + data[0].name + " - " + data[0].alpha2Code); 

    $("#capital").html("Capital: " + data[0].capital); 

    $("#region").html("Region: " + data[0].region + " - " + data[0].subregion); 

    ... 

私は、ユーザー入力で、その後の国の名前を追加したい:

HTML:

<input type="text" placeholder="Country Name" id="inputText"></input> 
<button id ="searchButton"> Search </button> 

JS

var inputText = $("#inputText"); 
var apiCall = "https://restcountries.eu/rest/v1/name/"; 


$("#searchButton").click(function(){ 
    return apiCall = apiCall + inputText.val(); 
}); 

を代わりにリターンの私はconsole.logを行う場合は、ユーザーのタイプが"eの場合、最初に動作するような文字列が得られますngland」は、その後、私が取得する 『https://restcountries.eu/rest/v1/name/england』私はそう$("#searchButton").click(function(){}が実際にapiCallの値を変更し、その新しい値で再びgetJSON実行を作る何ができるか

$.getJSON(apiCall, function(data){ 

$("#country").html("Country Name: " + data[0].name + " - " + data[0].alpha2Code); 

    $("#capital").html("Capital: " + data[0].capital); 

    $("#region").html("Region: " + data[0].region + " - " + data[0].subregion); 

    ... 

+0

api urlをビルドした後、clickイベント内の 'getJSON'を呼び出します。 – Developer

答えて

1

これは

$("#searchButton").click(function(){ 
    apiCall = apiCall + inputText.val(); 
    $.getJSON(apiCall, function(data){ ... }); 
}); 
+0

これは一番簡単な答えだと思います。ありがとうございます。 – Sergi

0

マイrecommendatationは次のように独自の機能にACALL APIをリファクタリングすることで動作するはずです:ユーザーが検索]をクリックしたときに

function refreshCountryDetails (country) { 
    var url = (apiCall + country); 
    $.getJSON(url, function(data) { 
     $("#country").html("Country Na......}); 
    } 
    } 

その後、私たちは私たちのAPIのラッパーを呼び出すをユーザーの入力(inputText.val())で国の詳細を取得する:

$("#searchButton").click(function(){ 
     refreshCountryDetails(inputText.val()); 
    }); 
関連する問題