execute javascript after for loop

Question

I have a for loop that gets data from lists in subsites to build a html list on the page using an async ajax request, this works, but i wish to order the list after it has been generated to show the list in alphabetical order. I am on a learning curve with javascript so any help is appreciated. I need to run the sortProjects function after the onWebsLoaded function is complete.

    function onWebsLoaded(sender, args) {
    for (var i = 0; i < this.webs.get_count(); i++) 
    {
        client = "";
        var title = this.webs.itemAt(i).get_title();
        var desc = this.webs.itemAt(i).get_description();
        var url = this.webs.itemAt(i).get_serverRelativeUrl();
        id = (title).replace(/\ /g, "");
        getProjectProperties(url, title, desc, client, id); 
    }
}
function sortProjects () {
    tinysort('ul#projectstable>li');
}
function getProjectProperties (url, title, desc, client, id) {
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('Project Properties')/items('1')",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
                    client = data.d.Title;
                    $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>");
        },
        error: function () {
                    $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>");
        }
    });
}

Rory McCrossan · Accepted Answer · 2016-07-29 13:38:40Z

2

You can amend your logic so that you store an array of the promises returned from the $.ajax() calls. You can then apply() that array to $.when and call sortProjects(). Try this:

function onWebsLoaded(sender, args) {
    var requests = [];
    for (var i = 0; i < this.webs.get_count(); i++)  {
        client = "";
        var title = this.webs.itemAt(i).get_title();
        var desc = this.webs.itemAt(i).get_description();
        var url = this.webs.itemAt(i).get_serverRelativeUrl();
        id = (title).replace(/\ /g, "");
        requests.push(getProjectProperties(url, title, desc, client, id)); 
    }
    $.when.apply($, requests).done(sortProjects);
}

function sortProjects () {
    tinysort('ul#projectstable>li');
}

function getProjectProperties (url, title, desc, client, id) {
    // note 'return' below
    return $.ajax({
        url: url + "/_api/web/lists/getbytitle('Project Properties')/items('1')",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            client = data.d.Title;
            $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>");
        },
        error: function () {
            $('#projectstable').append("<li id='" + id + "' class='ms-ListItem'><a href='" + url + "'><span id='" + id + "Client' class='ms-ListItem-primaryText'>" + title + "</span><span class='ms-ListItem-secondaryText'>" + client + "</span><span class='ms-ListItem-tertiaryText'>" + desc + "</span></a></li>");
        }
    });
}

answered Jul 29, 2016 at 13:38

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Burrell Over a year ago

I have amended the code, but its still not running it could you comment the bits you changed to check i haven't missed anything? @rory

Sebastian Burrell Over a year ago

Checked it line by line, this solution does not work for me.

Collectives™ on Stack Overflow

execute javascript after for loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related