Почему вывод JSON выходит из строя?

Question

Я пытаюсь получить список информации о погоде для 8 мест. Я использую API погоды, который принимает долготу и широту и выдает вывод json с информацией о погоде для этого местоположения. Я передаю координаты в порядке 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]);

Я также пробовал это как $ .ajax

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, которыйбудет лучше для ваших пользователей.