Getting resolved data undefined in jquery

Question

I am trying to call synchronous call for getting data count using ajax call.

Here is my Jquery Code:

var baseurl = _spPageContextInfo.webServerRelativeUrl;
console.log(baseurl);
var ItemCount = $.Deferred();

function tilesCount(tilename, count)
{
    var url = baseurl + "/_api/web/lists/getByTitle('policies')/rootFolder/Folders?$expand=ListItemAllFields";
    count = 0;

    $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
            $(data.value).each(function (i, folder) {
                count = count + 1;
            });
            console.log("Call 1: " + count)
            ItemCount.resolve(count);
            return count;
        },
        error: function(error){
            console.log("Error: " + JSON.stringify(error));
            ItemCount.reject;
        }
    });
}

$(document).ready(function () {
    var count = tilesCount("");
    $.when(count).then(function(data){
        console.log("Call 2: " + data); 
    });
});

Output:
Call 1: 1
Call 2: undefined

Synchronous call working perfectly, but I am getting data as undefined

Your call isn't synchronous at all - it's async. Also, `tilesCount()` doesn't return anything so I'm not even sure what you're expecting to happen here? — Rory McCrossan, Nov 09 '16 at 08:36
^ Beat me to it, but yes, since you're not returning a value in your async call it'll always be undefined when you log "Call 2" — Jorrex, Nov 09 '16 at 08:38
ItemCount var ... set to a Deferred ... then ... never used outside of `tilesCount` function ... pointless - here's a tip ... `$.ajax` returns a promise (of sorts), so no need for the deferred anti-pattern you don't quite get right. — Jaromanda X, Nov 09 '16 at 08:42
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) — Jaromanda X, Nov 09 '16 at 08:50

Beginner · Accepted Answer · 2016-11-09T09:38:04.407

Since ajax is asynchronous return count; will be empty

var count = tilesCount("");

So the best solution is to just passed a callback function inside your method which can be call whenever your ajax is completed

function tilesCount(tilename, count, callback)

Wrap this inside your callback function

function(count) { 
    $.when(count).then(function(data){
        console.log("Call 2: " + data); 
    });
}

so your $(document).ready will be like this and just add parameter count inside the callback

$(document).ready(function () {
    tilesCount("", "", function(count) { 
        $.when(count).then(function(data){
            console.log("Call 2: " + data); 
        });
    });
});

your javascript code would be like this now

var baseurl = _spPageContextInfo.webServerRelativeUrl;
console.log(baseurl);
var ItemCount = $.Deferred();

function tilesCount(tilename, count, callback)
{
    var url = baseurl + "/_api/web/lists/getByTitle('policies')/rootFolder/Folders?$expand=ListItemAllFields";
    count = 0;

    $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
            $(data.value).each(function (i, folder) {
                count = count + 1;
            });
            console.log("Call 1: " + count)
            ItemCount.resolve(count);
            return callback(count);
        },
        error: function(error){
            console.log("Error: " + JSON.stringify(error));
            ItemCount.reject;
        }
    });
}

$(document).ready(function () {
    tilesCount("", "", function(count) { 
        $.when(count).then(function(data){
            console.log("Call 2: " + data); 
        });
    });
});

Getting resolved data undefined in jquery

1 Answers1