すべての結果をまとめて一度に表示する - AJAX

Question

現在、シーケンスの順序でデータを表示していますが、すべての結果を一度に表示する方法を探しています。

jQueryは "done（）"と "when（）"メソッドを持っていますが、実装には失敗していましたので、以下のようにしなければなりませんでした。ここで

は私のコードです：

(function($, window, document) { 
 
    $('.text').text('loading . . .'); 
 
    $('.header').append("Weather App"); 
 
    var weatherURL = "http:\/\/api.wunderground.com/api/API_KEY/conditions/q/"; 
 
    var finished = ""; 
 
    $(function() { 
 
    var getIp = $.ajax({ 
 
     type: "GET", 
 
     url: "http://ipinfo.io/json", 
 
     success: function(response) { 
 
     $('.text').html(''); 
 
     weatherURL = weatherURL + response.postal + ".json"; 
 
     displayLocation(response); 
 

 
     getWeather = $.ajax({ 
 
      type: "GET", 
 
      datatype: "jsonp", 
 
      url: weatherURL, 
 
      success: function(response) { 
 
      displayTemp(response); 
 
      displayConditions(response); 
 
      displayIcon(response); 
 
      } 
 
     }) 
 
     } 
 
    }); 
 
    }); 
 

 
    function displayLocation(response) { 
 
    $('.location').append(response.city + ", " + response.region + " - " + response.country); 
 
    } 
 

 
    function displayTemp(response) { 
 
    $('.temp').append(response.current_observation.temp_f); 
 
    } 
 

 
    function displayConditions(response) { 
 
    var obj = response.current_observation.icon; 
 
    var word1 = ""; 
 
    var word2 = ""; 
 

 
    var capWord1 = ""; 
 
    var capWord2 = ""; 
 

 
    if (obj.indexOf("mostly")) { 
 
     word1 = obj.substring(0, 6); 
 
     word2 = obj.substring(6); 
 
    } else if (obj.indexOf("partly")) { 
 
     word1 = obj.substring(0, 6); 
 
     word2 = obj.substring(6); 
 
    } else { 
 
     word1 = response.current_observation.icon; 
 
    } 
 

 
    if (word2.length > 1) { 
 
     capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1); 
 
     capWord2 = word2.charAt(0).toUpperCase() + word2.slice(1); 
 

 
     $('.conditions').append(capWord1 + " " + capWord2); 
 
    } else { 
 
     capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1); 
 
     $('.conditions').append(capWord1); 
 
    } 
 
    } 
 

 
    function displayIcon(response) { 
 
    $('.icon').append("<img src='" + response.current_observation.icon_url + "'>"); 
 
    } 
 
}(window.jQuery, window, document));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="header"></div> 
 
    <div class="location"></div> 
 
    <div class="temp"></div> 
 
    <div class="conditions"></div> 
 
    <div class="icon"></div> 
 
</div>

私はベストプラクティスや最高のデザインの面でコード上の他のフィードバックに開いています。

Answer 1

現在のところ、シーケンスの順序でデータを表示していますが、すべての結果を一度に表示する方法を探しています（ ）。

あなたはsuccess: function(res1)とsuccess: function(res2)などの2つのAJAX要求のための2人の異なる応答の引数名を使用し、内部の成功コールバック内のすべてのあなたの関数を呼び出す必要があります。

(function($, window, document) { 
 
    $('.text').text('loading . . .'); 
 
    $('.header').append("Weather App"); 
 
    var weatherURL = "http:\/\/api.wunderground.com/api/API_KEY/conditions/q/"; 
 
    var finished = ""; 
 
    $(function() { 
 
    var getIp = $.ajax({ 
 
     type: "GET", 
 
     url: "http://ipinfo.io/json", 
 
     success: function(res1) { 
 
     //wait and don't call your function 
 
     weatherURL = weatherURL + res1.postal + ".json"; 
 
     getWeather = $.ajax({ 
 
      type: "GET", 
 
      datatype: "jsonp", 
 
      url: weatherURL, 
 
      success: function(res2) { 
 
      //call all your functions inside here as you like 
 
      $('.text').html(''); 
 
      //res1 
 
      displayLocation(res1); 
 
      //res2 
 
      displayTemp(res2); 
 
      displayConditions(res2); 
 
      displayIcon(res2); 
 
      } 
 
     }) 
 
     } 
 
    }); 
 
    }); 
 

 
    function displayLocation(response) { 
 
    $('.location').append(response.city + ", " + response.region + " - " + response.country); 
 
    } 
 

 
    function displayTemp(response) { 
 
    $('.temp').append(response.current_observation.temp_f); 
 
    } 
 

 
    function displayConditions(response) { 
 
    var obj = response.current_observation.icon; 
 
    var word1 = ""; 
 
    var word2 = ""; 
 

 
    var capWord1 = ""; 
 
    var capWord2 = ""; 
 

 
    if (obj.indexOf("mostly")) { 
 
     word1 = obj.substring(0, 6); 
 
     word2 = obj.substring(6); 
 
    } else if (obj.indexOf("partly")) { 
 
     word1 = obj.substring(0, 6); 
 
     word2 = obj.substring(6); 
 
    } else { 
 
     word1 = response.current_observation.icon; 
 
    } 
 

 
    if (word2.length > 1) { 
 
     capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1); 
 
     capWord2 = word2.charAt(0).toUpperCase() + word2.slice(1); 
 

 
     $('.conditions').append(capWord1 + " " + capWord2); 
 
    } else { 
 
     capWord1 = word1.charAt(0).toUpperCase() + word1.slice(1); 
 
     $('.conditions').append(capWord1); 
 
    } 
 
    } 
 

 
    function displayIcon(response) { 
 
    $('.icon').append("<img src='" + response.current_observation.icon_url + "'>"); 
 
    } 
 
}(window.jQuery, window, document));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="header"></div> 
 
    <div class="location"></div> 
 
    <div class="temp"></div> 
 
    <div class="conditions"></div> 
 
    <div class="icon"></div> 
 
</div>