Why is JSON outputting out of order?
        Posted  
        
            by 
                dcp3450
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by dcp3450
        
        
        
        Published on 2011-01-06T16:20:02Z
        Indexed on 
            2011/01/06
            16:54 UTC
        
        
        Read the original article
        Hit count: 275
        
I'm am trying to get a list of weather information for 8 locations. I'm using a weather API that accepts longitude and latitude and spits back json output with the weather info for that location. I feed the coords in order 0->7 but when json processes the data it comes back in a seemingly random order. I assume it's because some process faster than others and json is outputing what it gets back as it gets it. The output is correct, only the order is wrong.
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]);
I have also tried it as $.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:
example of json output:
{ "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" } ] }}
© Stack Overflow or respective owner