CODEWITHSUNDEEP
jqueryjson
user1452893
user1452893

Reputation: 868

My getJSON calls are returning results randomly rather than the order they are called

I need to make multiple getJSON requests to write data to an HTML file. This example shows 3 requests yet I will add up to 6 requests (maybe more) in the same format.

My problem is that the results are returned in a random order rather in the order they are called. I suspect they are being returned in the order of the request's completion.

I must write the divs in the same order every time.

The values are returned from the getJSON request plus two instances in each request's case come from a local set of vars (nwsltrID[0] and nwsltrNames[0]} which are unique to each request. So, the HTML I'm appending becomes variable because of those two vars (shown in code example).

CODE EXAMPLE:

$.getJSON(url0, function (data) {
utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[0] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[0] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url0 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>");   
});

$.getJSON(url1, function (data) {

utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[1] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[1] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url1 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>"); 
});

$.getJSON(url2, function (data) {
utcday =  data[0].createdOn;
ltrDay = moment.utc(utcday).format("DD MMM YY");                           

$('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[2] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[2] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url2 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>"); 
});

I'm certain I'm doing some other newbie stuff in here that can be improved and optimized. So, I'm eager to hear all suggestions.

I hope I have provided enough info to get this fixed.

Upvotes: 1

Views: 235

Answers (4)

kidig
kidig

Reputation: 212

To order AJAX queries you can use $.when function - http://api.jquery.com/jquery.when/:

Here's example for you:

$.when( $.getJSON(url0), $.getJSON(url1), $.getJSON(url2) ).done( function() {
    $.each(arguments, function(index, result) {
        var data = result[0];
        utcday =  data[0].createdOn;
        ltrDay = moment.utc(utcday).format("DD MMM YY");

        $('#listDiv').append(... + nwsltrID[index] + .... + nwsltrNames[index]  + ... );
    });
});

No matter how much queries you have - just add it as arguments for $.when function!

Upvotes: 3

cforcloud
cforcloud

Reputation: 589

or you could start with seperate divs inside #listDiv

 $('#listDiv').append('<div class="ellipsis ellipsis0"></div><div class="ellipsis ellipsis1"></div><div class="ellipsis ellipsis2"></div>');

 $.getJSON(url0, function (data) {
      utcday =  data[0].createdOn;
      ltrDay = moment.utc(utcday).format("DD MMM YY");                           

      $('#listDiv .ellipsis0').append('<div class="ltrFolder"><a title="Archive" href="' + idString3 + nwsltrID[0] + '"><i class="fa fa-folder-o"></a></i></div><div id="' + data[0].id + '" class="ellipsis listTitle">' + nwsltrNames[0] + '<br><a title="' + data[0].conversation + '" class="addressClick" id ="' + url0 + '"><span class="point" ><i class="fa fa-newspaper-o"></i></span>' + data[0].conversation + '</a><div class="ltgrey" style="text-transform:uppercase;padding-top:3px;">' + ltrDay + '</div></div><div style="padding: 0 20px 20px 0; color:#666666;">' + data[0].textHead);   
 });

 $.getJSON(url1, function (data) {
      utcday =  data[0].createdOn;
      ltrDay = moment.utc(utcday).format("DD MMM YY");                           

      $('#listDiv .ellipsis1').append('...' + data[0].textHead);   
 });

 $.getJSON(url2, function (data) {
      utcday =  data[0].createdOn;
      ltrDay = moment.utc(utcday).format("DD MMM YY");                           

      $('#listDiv .ellipsis2').append('...' + data[0].textHead);   
 });

Upvotes: 0

Erik Mandke
Erik Mandke

Reputation: 1667

Could it be that this function does work asynchronously ? So it fire all three of them and the finished function's callback (whoever it will be) starts appending :o ?

You could let these functions work in sync-mode

Upvotes: 1

Nicolas Albert
Nicolas Albert

Reputation: 2596

You can chain your calls:

$.getJSON(url0, function (data) {
    utcday =  data[0].createdOn;
    ltrDay = moment.utc(utcday).format("DD MMM YY");                           

    $('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[0] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[0] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url0 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>");
    $.getJSON(url1, function (data) {

        utcday =  data[0].createdOn;
        ltrDay = moment.utc(utcday).format("DD MMM YY");                           

        $('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[1] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[1] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url1 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>");
        $.getJSON(url2, function (data) {
            utcday =  data[0].createdOn;
            ltrDay = moment.utc(utcday).format("DD MMM YY");                           

            $('#listDiv').append("<div class= \"ellipsis\" ><div class=\"ltrFolder\" ><a title= \"Archive\" href = \"" + idString3 + nwsltrID[2] + "\"><i class=\"fa fa-folder-o\"></a></i></div><div id=\"" + data[0].id + "\"class= \"ellipsis listTitle\" >" + nwsltrNames[2] + "<br><a title= \"" + data[0].conversation + "\" class = \"addressClick\" id =\"" + url2 + "\"><span class =\"point\" ><i class=\"fa fa-newspaper-o\"></i></span>" + data[0].conversation + "</a><div class=\"ltgrey\" style=\"text-transform:uppercase;padding-top:3px;\">" + ltrDay + "</div></div><div style=\"padding: 0 20px 20px 0; color:#666666;\">" + data[0].textHead + "</div>"); 
        }); 
    });
});

The A of AJAX is asynchronous: requests are done in parallel, the server answers in parallel, the browser receive responses in parallel. Each requests have their own speed.

Upvotes: 2

Related Questions