Deferred jQuery Ajax Call Only Shows Data Inside of Function

Question

I have tried this several ways, using .done and .then, and I get the same result - the data seems to populate the array just fine ( I can console.log the array inside of "pushTeamMembers" ), but the array is empty when I try to view it in the main flow.

I thought it might be some sort of a scope issue, but it works great if I put a slight pause ( set interval ) before the last console.log - which seems to imply that the program is displaying the data before the data is actually pulled down. Thanks.

var siteurl = _spPageContextInfo.webAbsoluteUrl;
var teamMembers = [];

// ********** Ajax query 
    var teamListData = $.ajax({
        type: 'get',
        url: siteurl + "/_api/web/lists/getbytitle('The Team')/items",
        headers: { "Accept": "application/json; odata=verbose" }
    });

// ********** Ajax query deferred ".then" handler
    teamListData.then(function (value) {
      $.each(teamListData, function(i, item) {
        var thisNameId = teamListData[i].NameId;
        var workStream = teamListData[i].Title;
        var member = {id: thisNameId, workstream: workStream};
        pushTeamMembers(member);
      });
    });

// ********** Push onto array
      function pushTeamMembers(member)
      {
        teamMembers.push(member);
        // ********** This shows that the array is populated.
        console.log(teamMembers);
      }

// ********** This shows that the array is empty - unless I put a 
// slight pause here ( set interval ).

console.log(teamMembers);

score -1 · Answer 1 · answered Nov 02 '17 at 17:54

UPDATE: I think I was thinking incorrectly about this. Having the data inside of the .done function is all I need. The program will go ahead and execute the second console.log before the .done function has finished, so trying to access the data in the flow of the program, outside of the context of the deferred context defeats the point of it being deferred. Rather than drop back down into the program flow, I just need to keep chaining functions inside of the deferred context. I guess this is obvious and I was tempted to delete my post, but maybe this will help some newbie like me.

Deferred jQuery Ajax Call Only Shows Data Inside of Function

1 Answers1