Javascript Issue with the order of printing to screen

Question

I have a problem with my output of this. getYammerJSON contains a line that also appends. The issue is that when I run the script it puts all of the appends that are not inside the function first, and then the contents of the function, is it something to do with ready?

<div id="test"></div>

_

$(function(){

    while(n<len){
    $('#test').append("<br/><br/>Yammer Group ID: <b>" + groupIDs[n] + "<b/><br/><br/>");
    getYammerJSON(page,n)
    n++;
    }

});

    function getData(returnData){
    $.each(returnData.users, function(key, value){
        if(value.email != undefined){
            $('#test').append(value.email + "<br/>");
        }
    });
}

function getYammerJSON(page,n){
    $.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function (returnData) {
        getData(returnData);

        if(!returnData.more_available === true){
            return false;
        }
        else {
            page++;
            getYammerJSON(page,n);
        }
    });

}

an example (it should separate the emails by group ID, not put at the top) -

Yammer Group ID: 12069



Yammer Group ID: 46371

adetan@test.com
alanild@test.com
alexchi@test.com
alisoc@test.com
alwyn@test.com
...

The HTTP callback from `get()` gets fired when the back end replies, not when `getYammerJSON` gets called, so JS continue to insert your group info into `#test` then back-end replies and your code add the data at the bottom. — GillesC, Aug 05 '15 at 08:01

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

This is a asynchronous problem. You expect the functions to fire after each other. They don't. The jQuery get is asynchronous. So it fires when the request is ready, not when the function is completed. This causes data to appear in the wrong place. You need to rethink the way #test is being populated.

The solution here will solve the asynchronous problem.

function getYammerJSON(page,n){
    if (!$('#yg_'+n)[0]) //test if the div already exists, if not create.
    {
        $('#test').append("<div id='yg_"+n+"'>Yammer Group ID: <b>" + groupIDs[n] + "<b/></div><br/>");
    }
    $.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function (returnData) {
        getData(returnData, n);

        if(!returnData.more_available === true){
            return false;
        }
        else {
            page++;
            getYammerJSON(page,n);
        }
    });

}

function getData(returnData, n){
$.each(returnData.users, function(key, value){
    if(value.email != undefined){
        $('#yg_'+n).append(value.email + "<br/>");
    }
});

Now everytime getYammerJSON is called it will create a new div inside #test if it doesn't already exists. The div is given an ID that refers to the n value. When getData is called it will append the addresses into the correct div always corresponding with the correct group id.

asynchronous forces you to rethink your strategy of data retrieval. It's relying more on callbacks. There are new techniques around the corner. They are mentioned in comments, but they are far from common practice. Till that day you need to apply call backs in order to make asynchronous work without faults.

Learn more here: Asynchronous vs synchronous execution, what does it really mean?

Ok thanks, is there a way to wait until the function is completed? — Ali_bean, Aug 05 '15 at 08:04
That doesn't work as it is looping through multiple pages, so here it prints every 50 email addresses but thanks — Ali_bean, Aug 05 '15 at 08:13
See my updated example. The main problem is the asynchronous part, once you figure that out, the rest will be easier to fix. — Mouser, Aug 05 '15 at 08:13

Javascript Issue with the order of printing to screen

1 Answers1