CODEWITHSUNDEEP
javascriptjqueryajaxsharepointcallback
Sebastian Burrell
Sebastian Burrell

Reputation: 19

execute javascript after for loop

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>");
        }
    });
}

Upvotes: 1

Views: 53

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

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>");
        }
    });
}

Upvotes: 2

Related Questions