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: 218

Filed under:
|
|
|
|

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

Related posts about JavaScript

Related posts about jQuery