0

My main issue is that buildItem(data) returns 'undefined'. I've gone through some links on stackoverflow about how to do callback functions but I think that it's getting a bit messy since I'm going through multiple functions here.

I have a list that I'm appending to in this ajax call.

$.ajax({
    dataType: "json,
    url: "/retrieveTeamView.do?managerEmail=${email}",
    cache: false,
    success: function (data, status) {
        $('#nestable ol').append(buildItem(data));
    });

I defined buildItem() as such:

function buildItem(item) {
    getTotalCost(item, function(totalCost) {
        html += "<span>" + totalCost + "</span>";
        return html;
    }
 }

So all buildItem does is it takes the data and passes it into getTotalCost.

Here my getTotalCost() function should take the item, as it has an attribute "email" that I need for the url, and it should do a loop through the data retrieved from the ajax call to return a totalCost.

function getTotalCost(item, callback) {
    $.ajax({
        dataType: "json",
        url: "/retrieveUserUsage.do?email=" + item.email,
        success: function(data) {
            var totalCost = 0;
            for (var i = 0; i < data.length; i++) {
                totalCost += parseFloat(data[i].cost);
            }
            callback(totalCost);
        }
    });
}

My understanding is that callback(totalCost) returns back to buildItem() and returns the total cost successfully. From what I understand, doing alert(html) gives me a correct output in the alert dialog, but it is not successfully appended in the ajax function. Am I doing something wrong?

Note: I deleted chunks of details to keep the idea but to still keep the code secretive, so sorry if some parts may not seem like they're used.

CHom
  • 3
  • 3
  • `buildItem()` does not return anything to append it anywhere. [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Thomas May 31 '17 at 22:02
  • I've been referring to this link constantly but I can't seem to wrap my mind around it, as my functions seem to dig a little deeper than the examples. Would a var html before getTotalCost() and a return html after getTotalCost() "return something to append"? – CHom Jun 01 '17 at 02:07

1 Answers1

0

I am thinking that the issue is related to the fact that AJAX calls are asynchronous. Therefore, it may be trying to update the DOM before everything is returned. Therefore you need to nest the calls. you could try something like this:

$.ajax({
    dataType: "json,
    url: "/retrieveTeamView.do?managerEmail=${email}",
    cache: false,
    success: function (data, status) {
        $.ajax({
            dataType: "json",
            url: "/retrieveUserUsage.do?email=" + data.email,
            success: function(data) {
                var totalCost = 0;
                for (var i = 0; i < data.length; i++) {
                    totalCost += parseFloat(data[i].cost);
                }
                $('#nestable ol').append("<span>" + totalCost + "</span>");             
            }
        }); 
    }
});
Simon
  • 764
  • 4
  • 8
  • Do you imply that he should copy-paste code all over the place, instead of using functions for repeated tasks? – Thomas May 31 '17 at 22:16
  • In the given context the aim is to perform a single task, there is not necessarily a need to chain functions together just for the sake of complexity. – Simon May 31 '17 at 22:20
  • No, not complexity, for the sake of simplicity. Small, granular, comprehensible functions. He only has to learn how to deal with async values. That's why I linked the other question. – Thomas May 31 '17 at 22:35
  • I left my computer but there was actually a key piece of code that I left out, where buildItem() is recursive and builds upon using children from the data. I'll update the code tomorrow, but I think this is a good start for me to build off of. Thank you! – CHom Jun 01 '17 at 02:03