JSONの出力が乱れるのはなぜですか？

Question

私は8か所の気象情報のリストを取得しようとしています。私は経度と緯度を受け入れ、その場所の天気情報を使ってjson出力を返す天気APIを使用しています。私は0〜7の順番で座標を供給しますが、jsonがデータを処理するとき、それは一見無作為な順番に戻ります。私は、他のプロセスより速いプロセスとjsonがそれを取得したときに戻ってくるものを出力していることが原因であると想定しています。出力は正しいですが、順序だけが間違っています。

var loc = null; 
var body = ""; 
var campuses = new Array(8); 
campuses[0] = "34.47242,-84.42489,1"; 
campuses[1] = "33.81488,-84.62048,2"; 
campuses[2] = "34.27502,-84.46976,3"; 
campuses[3] = "33.92987,-84.55065,4"; 
campuses[4] = "34.03433,-84.46723,5"; 
campuses[5] = "34.08362,-84.67115,6"; 
campuses[6] = "33.91124,-84.82634,7"; 
campuses[7] = "34.10409,-84.51804,8"; 

function getWeather(campusArray) 
{ 
    body += '<p class="topTitle">Campus Weather</p>'; 
    var cSplit = new Array(); 
    cSplit = campusArray.split(','); 
    var loc = "http://www.worldweatheronline.com/feed/weather.ashx?q="+cSplit[0]+","+cSplit[1]+"&format=json&num_of_days=2&key=0a05fff921162948110401&callback=?"; 
    $('#content').html('asdf'); 
    $.getJSON(loc,function(js) 
    { 
     var data = js.data; 
     var humidity = data.current_condition[0].humidity; 
     var tempF = data.current_condition[0].temp_F; 
     var iconDESC = data.current_condition[0].weatherDesc[0].value; 
     var iconURL = data.current_condition[0].weatherIconUrl[0].value; 
     var windDir = data.current_condition[0].winddir16Point; 
     var windSpeed = data.current_condition[0].windspeedMiles; 
     var tempMaxF = data.weather[0].tempMaxF; 
     var tempMinF = data.weather[0].tempMinF; 

     body += '<p class="title">'+cSplit[2]+'</p>'+ 
     '<span class="body">'+tempF+ 
     ' '+windSpeed+ 
     '<img src="'+iconURL+'" /></span>'; 
     $('#content').html(body); 
    }); 
} 
getWeather(campuses[0]); 
getWeather(campuses[1]); 
getWeather(campuses[2]); 
getWeather(campuses[3]); 
getWeather(campuses[4]); 
getWeather(campuses[5]); 
getWeather(campuses[6]); 
getWeather(campuses[7]); 

また、私は$アヤックス

var loc = null; 
var body = ""; 
var campuses = new Array(8); 
campuses[0] = "34.47242,-84.42489,1"; 
campuses[1] = "33.81488,-84.62048,2"; 
campuses[2] = "34.27502,-84.46976,3"; 
campuses[3] = "33.92987,-84.55065,4"; 
campuses[4] = "34.03433,-84.46723,5"; 
campuses[5] = "34.08362,-84.67115,6"; 
campuses[6] = "33.91124,-84.82634,7"; 
campuses[7] = "34.10409,-84.51804,8"; 

function getWeather(campusArray) 
{ 
    body += '<p class="topTitle">Campus Weather</p>'; 
    var cSplit = new Array(); 
    cSplit = campusArray.split(','); 
    var loc = "http://www.worldweatheronline.com/feed/weather.ashx?q="+cSplit[0]+","+cSplit[1]+"&format=json&num_of_days=2&key=0a05fff921162948110401&callback=?"; 
    $.ajax({ 
     url: loc, 
     async: true, 
     dataType: "json", 
     success: function(js) 
     { 
      var data = js.data; 
      var humidity = data.current_condition[0].humidity; 
      var tempF = data.current_condition[0].temp_F; 
      var iconDESC = data.current_condition[0].weatherDesc[0].value; 
      var iconURL = data.current_condition[0].weatherIconUrl[0].value; 
      var windDir = data.current_condition[0].winddir16Point; 
      var windSpeed = data.current_condition[0].windspeedMiles; 
      var tempMaxF = data.weather[0].tempMaxF; 
      var tempMinF = data.weather[0].tempMinF; 

      body += '<p class="title">'+cSplit[2]+'</p>'+ 
      '<span class="body">'+tempF+ 
      ' '+windSpeed+ 
      '<img src="'+iconURL+'" /></span>'; 
      $('#content').html(body); 
     } 
    }); 
} 
getWeather(campuses[0]); 
getWeather(campuses[1]); 
getWeather(campuses[2]); 
getWeather(campuses[3]); 
getWeather(campuses[4]); 
getWeather(campuses[5]); 
getWeather(campuses[6]); 
getWeather(campuses[7]); 

EDITとしてそれを試してみました：JSON出力の

例：

{ "data": { "current_condition": [ {"cloudcover": "100", "humidity": "93", "observation_time": "04:04 PM", "precipMM": "0.0", "pressure": "1009", "temp_C": "2", "temp_F": "36", "visibility": "8", "weatherCode": "116", "weatherDesc": [ {"value": "Mist" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0006_mist.png" } ], "winddir16Point": "WNW", "winddirDegree": "290", "windspeedKmph": "7", "windspeedMiles": "4" } ], "request": [ {"query": "Lat 34.47 and Lon -84.42", "type": "LatLon" } ], "weather": [ {"date": "2011-01-06", "precipMM": "9.3", "tempMaxC": "7", "tempMaxF": "45", "tempMinC": "2", "tempMinF": "35", "weatherCode": "113", "weatherDesc": [ {"value": "Sunny" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png" } ], "winddir16Point": "WNW", "winddirDegree": "293", "winddirection": "WNW", "windspeedKmph": "20", "windspeedMiles": "13" }, {"date": "2011-01-07", "precipMM": "0.0", "tempMaxC": "6", "tempMaxF": "44", "tempMinC": "0", "tempMinF": "31", "weatherCode": "116", "weatherDesc": [ {"value": "Partly Cloudy" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png" } ], "winddir16Point": "WNW", "winddirDegree": "286", "winddirection": "WNW", "windspeedKmph": "25", "windspeedMiles": "16" } ] }} 

Answer 1

あなたは再帰的に使用しているgetJSONコールバックを変更する必要があります

var loc = null, body = "", var campuses = [ 
    "34.10409,-84.51804,8", "33.91124,-84.82634,7", "34.08362,-84.67115,6", 
    "34.03433,-84.46723,5", "33.92987,-84.55065,4", "34.27502,-84.46976,3", 
    "33.81488,-84.62048,2", "34.47242,-84.42489,1" 
]; // notice they are sorted backwards 

function getWeather(campusArray) { 
    var cSplit = [], loc; 
    body += '<p class="topTitle">Campus Weather</p>'; 

    cSplit = campusArray.pop().split(','); // popping the array removes it 
              // from the length 

    /* truncated for brevity. Put your additional code here. */ 

    $.getJSON(loc, function(js) { 
     /* truncated for brevity. Put your code here. */ 
     if (campusArray.length) { 
       getWeather(campusArray); 
     } 
    }); 
} 
getWeather(campuses); 

Answer 2

あなたはAjaxのメソッドを使用して指定することができasync: false,各呼び出しがブロックされる原因となります。代わりに、各キャンパス結果のプレースホルダを用意し、結果が返されるたびにそれを置き換えることで、ターゲット要素を受け入れるようにgetWeatherメソッドを拡張する必要がありますが、これは非同期Ajaxアプローチを使用できることを意味します。あなたのユーザーにとってはより良いでしょう。