How can I return the result of an asynchronous request for concatenation?

Question

Here's my function getState, which makes an ajax call:

var getState = function(_id, callback) {
    $.ajax({
        url: hostGlobal+"site/estrutura/ajax.php",
        type: "POST",
        dataType: "HTML",
        data: {
            action: "getState",
            id: _id
        },
        success:function(result, textStatus, jqXHR) {
            callback(result);
        },
        error: function(jqXHR, textStatus, errorThrown) { 
        }
    });
}

And here I use the resulting string for concatenation:

"<li class='list-group-item listItem' id='state" + i + "'><strong>Estado:</strong><span class='listSpan'> " + getState(result[i]["estado"], function(x) { return x; }) + "</span></li>" +

Since that return statement does not work, since it returns for the anonymous function instead of the getState, I try to modify the contents of the element:

... + "<li class='list-group-item listItem' id='state" + i + "'><strong>Estado:</strong><span class='listSpan'> " + getState(result[i]["estado"], function(x) { $("#state" + i).html(x); }) + "</span></li>" + ...

But "undefined" is everything I get. I know I'm not using the callback properly, but I'm failing to understand how...

Add the code for your callback as we can't work out what `i` is from what you've posted. Also, post an example of your JSON. — Andy, Dec 08 '15 at 03:44
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — PeterKA, Dec 08 '15 at 03:52
_"Since that return statement doesn't work"_ What return statement? — JLRishe, Dec 08 '15 at 04:09

score 0 · Answer 1 · answered Dec 08 '15 at 04:10

You're wanting to concatenate a string that you do not yet have in your local machine's memory. What you need to do is create a callback that will add an li element to the ul once the http request completes.

Here's some pseudo code for you to work off of

var getState = function(_id, callback) {
    $.ajax({
        url: hostGlobal+"site/estrutura/ajax.php",
        type: "POST",
        dataType: "HTML",
        data: {
            action: "getState",
            id: _id
        },
        success:callback,
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("Oh nooooo, there was an error.");
        }
    });
};

var ul = document.getElementById("ulToPopulate");

// Use some closure voodoo
function addLi(ulElement){
    return function(id, i){
        var li = new HTMLLiElement();
        // Initialize LI element here.
        li.classList.add("list-group-item");
        li.classList.add("listItem");

        // Make ajax request
        getState(id, function(result){
            // When the ajax request completes this callback will be called and the li will get added to the ul.
            li.setAttribute("id", "state"+i);
            li.innerHTML = "<strong>Estado:</strong><span class='listSpan'> " + result.toString() + "</span>";
            ulElement.appendChild(li);
        });
    }
}

// Make a function to add lis to the specified ul
var addLiToUlToPopulate = addLi(ul);

for(var i = 0, len = result.length; i<len; i++) // in your original code it looks like you were enumerating through an array called result for ids.
    addLiToUlToPopulate(/* ID */ result[i]["estado"], /* index (You appear to be using it in your li element) */ i);

Sidenote, it may be a good idea for optimization purposes to send a bunch of ids to the server at once in a batch, so that you only make 1 http request.

How can I return the result of an asynchronous request for concatenation?

1 Answers1