0

i'm struggling to understand why the code below when the pictureRetrieve function called from inside the Completedetails() function it returns undefined. Despite knowing that the values exist especially when i check the console. Checking online it seems the problem maybe as a result of the asynchronous nature of Ajax. it maybe an area i need to improve on but i'll be grateful if someone could spot where the issue is and how i can fix it

function CompleteDetails() {
  var requestUri = _spPageContextInfo.webAbsoluteUrl +
    "/_api/Web/Lists/getByTitle('OrganisationalChart')/items?$select=Id,user/Title,user/Id,user/Name,Boss/Id,Boss/Title,PictureUrl,Designation&$expand=user,Boss";

  $.ajax({
    url: requestUri,
    type: "GET",
    async: false,
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    success: function(data) {

      var dataResults = data.d.results;

      console.log(dataResults);

      for (var i = 0; i < dataResults.length; i++) {
        var userDetails = dataResults[i]['user'].Name.split('|')[1];
        var employeeId = dataResults[i]['user'].Id.toString();
        var employeeName = dataResults[i]['user'].Title
        var Designation = dataResults[i].Designation != null ? dataResults[i].Designation : '';
        var reportingManager = dataResults[i]['Boss']['Id'] != null ? dataResults[i]['Boss']['Id'] : '';
        reportingManager = reportingManager.toString();

        //Get the user profile picture for each user
        userPicture = pictureRetrieve(userDetails);

      }

    },
    failure: function(r) {
      alert(r.d);
    },
    error: function(r) {
      alert(r.d);
    }
  });
}
var pictureRetrieve = function GetPictureUrl(user) {


  var requestUri = _spPageContextInfo.webAbsoluteUrl +
    "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + user + "'";

  $.ajax({

    url: requestUri,
    type: "GET",
    async: false,
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    success: function(data) {


      var DataRes = data.d.PictureUrl;
      var PictureDetails = data.d.PictureUrl != null ? data.d.PictureUrl : 'nouserimageurl';
      console.log(PictureDetails); // i get a value for this everytime it is called;`return PictureDetails;                  


    },
    failure: function(r) {
      alert(r.d);
    },
    error: function(r) {
      alert(r.d);
    }



  });
}
Nope
  • 22,147
  • 7
  • 47
  • 72
Ogbobe Buko
  • 89
  • 2
  • 14
  • Yes, you're correct that it's because the ajax call completes asynchronously, later, after your function has returned. See the linked question's answers for details. – T.J. Crowder Jan 13 '17 at 11:45
  • Thank T.J for the link, had a look through it and it has good learnings... but i'm still struggling with this. The first Ajax call loads and the callback runs okay which is fine, the second Ajax call depends on values gotten from the first Ajax call's success callback. how then do i get the success callback for the second function to stop returning a value of undefined – Ogbobe Buko Jan 13 '17 at 13:01

0 Answers0