How to turn nested jQuery Promises into flat code structure using .done() and .then()

Question

Below's code using jQuery promises in combination with callbacks does the following:

Saves Group UUID to server using storeGroupOnServer()
Creates a DOM element for the group using createGroupDomNode()
Creates child elements for each image, using createNewChildDomNode()

How can this be written more flat (avoiding the nesting), using .then()?

groupPromise.done(function(fileGroupInfo) {
    storeGroupOnServer(fileGroupInfo.uuid, function(groupid){

        createGroupDomNode(groupid, function(groupnode){

            $.each(arrayOfFiles, function(i, file) {
                file.done(function(fileInfo) {
                    createNewChildDomNode(fileInfo.cdnUrl, groupnode);
                });
            });
        });
    });
});

Step 1: storeGroupOnServer():

storeGroupOnServer = function(uuid, callback) {
    $.post('saveGroup.php', {uuid:uuid},
    function(data) {
        callback(data.groupid);
    },'json');
};

Step 2: createGroupDomNode():

createGroupDomNode = function(groupid, callback) {
    var cloner = $('#cloner');
    var newnode = cloner.clone(true);
    newnode.attr('id',groupid);
    newnode.removeClass('hide');
    cloner.after(newnode);
    callback(newnode);
}

Step 3: createNewChildDomNode():

function createNewChildDomNode(imgpath, groupdom){
    imgnode = $('<img/>').attr('src',imgpath);
    picnode = $('<picture/>').append(imgnode);
    $(groupdom).first().prepend(picnode);
}

Does the code work as it is? Can you show a working example? Are you asking how to change it up to make it "better". If so this question is off topic for Stack Overlow and is more appropriate for https://codereview.stackexchange.com/ — Taplar, Nov 16 '18 at 20:19
you can use `async`/`await` syntax if your target environments support it. it uses Promises behind the scenes but lets you write your functions in a synchronous-style syntax — Derek, Nov 16 '18 at 20:21
@Taplar Yes, the code works, but it's part of Uploadcare. Sharing the whole code is a bit cumbersome. Yes, this is asking to improve this code. Thanks for the suggestion about Codereview. — bart, Nov 16 '18 at 20:21
Make `storeGroupOnServer` return the promise that `$.post` already creates. Do not take a callback. — Bergi, Nov 16 '18 at 22:41
`createGroupDomNode` seems to be entirely synchronous. It should not take a callback (nor create a promise) at all. — Bergi, Nov 16 '18 at 22:41
@Bergi `createNewChildDomNode()` needs to wait for `createGroupDomNode()` to be completed, how else would you do that? — bart, Nov 17 '18 at 00:15
What is in there that would "get completed"? You should be able to simply write `const groupnode = createGroupDomNode(groupid); … createNewChildDomNode(fileInfo.cdnUrl, groupnode);` — Bergi, Nov 17 '18 at 14:06

score 0 · Answer 1 · answered Nov 16 '18 at 20:54

Will give the start without having to rewrite the whole thing and let you fill in the rest

groupPromise.then(function(fileGroupInfo){
   return fileGroupInfo.uuid;
})
.then(storeGroupOnServer)
.then(createGroupDomNode)....



// uuid argument comes from return in groupPromise.then()
storeGroupOnServer = function(uuid) {
  // return the ajax promise
  return $.post('saveGroup.php', {uuid: uuid}, null, 'json')
        .then(function(data) {
           // return to next then() in chain which calls createGroupDomNode()
            return data.groupid;
        });
}

Thanks, that's the kind of start I was looking for. Appreciated. — bart, Nov 16 '18 at 21:55

How to turn nested jQuery Promises into flat code structure using .done() and .then()

1 Answers1