jQuery AJAX list Get $.deferred..nothing happens

Question

I am trying to use jQuery deferred to cache data into arrays coming from lists so I can use throughout my code for efficiency.

Unfortunately, I am unable to do so. I don't get any errors but nothing happens either.

Here's a snippet of the code. What am I doing wrong?

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

    $(document).ready(function() {
  getNavData("Navigation");
  getSubNavData("Sub Navigation");
  getMegaMenuData("Mega Menu Category");
  getCategoryMenuData("category menu");
});

function getNavData(lName) {
  var dfd = $.Deferred();

  var endPointUrl = "../_api/web/lists/getbyTitle('" + lName + "')/items";

  var headers = { accept: "application/json;odata=verbose" };
  $.ajax({
    url: endPointUrl,
    type: "GET",
    headers: headers,
    success: function success(data) {
      cacheNavData = data.d.results;
  return dfd.resolve(cacheNavData);
}
  });
  return dfd;
}

function getSubNavData(lName) {
  var dfd = $.Deferred();

  var endPointUrl =
"../_api/web/lists/getbyTitle('" +
lName +
"')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav";

  var headers = { accept: "application/json;odata=verbose" };

  $.ajax({
    url: endPointUrl,
    type: "GET",
    headers: headers,
    success: function success(data) {
      cacheSubNavData = data.d.results;
      return dfd.resolve(cacheSubNavData);
    }
  });
  return dfd;
}

function getMegaMenuData(lName) {
  var dfd = $.Deferred();

  var endPointUrl = "../_api/web/lists/getbyTitle('" + lName + "')/items";

  var headers = { accept: "application/json;odata=verbose" };
  $.ajax({
    url: endPointUrl,
    type: "GET",
    headers: headers,
    success: function success(data) {
      cacheMegaMenuData = data.d.results;
      return dfd.resolve(cacheMegaMenuData);
    }
  });
  return dfd;
}

function getCategoryMenuData(lName) {
  var dfd = $.Deferred();

  var endPointUrl = ".._/api/web/lists/getbyTitle('" + lName + "')/items";

  var headers = { accept: "application/json;odata=verbose" };
  $.ajax({
    url: endPointUrl,
    type: "GET",
    headers: headers,
    success: function success(data) {
      cacheCategoryMenuData = data.d.results;
      return dfd.resolve(cacheCategoryMenuData);
    }
      });
  return dfd;
}

var promise = getNavData();

promise
  .then(getSubNavData)
  .then(getMegaMenuData)
  .then(getCategoryMenuData)
  .done(function() {
    createNavigation();

console.log(cacheNavData);
console.log(cacheSubNavData);
console.log(cacheMegaMenuData);
console.log(cacheCategoryMenuData);
});

function createNavigation() {
  alert("Build Navigation");
}

Answer 1

The following example below for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

$(document).ready(function() {
  getData("Navigation").done(function(data1){
    cacheNavData=data1.d.results;
    getData("Sub Navigation").done(function(data2){
        cacheSubNavData=data2.d.results;
        getData("Mega Menu Category").done(function(data3){
            cacheMegaMenuData=data3.d.results;
            getData("category menu").done(function(data4){
                cacheCategoryMenuData=data4.d.results;

                //add other code
                createNavigation();
                console.log(cacheNavData);
                console.log(cacheSubNavData);
                console.log(cacheMegaMenuData);
                console.log(cacheCategoryMenuData);

            });
        });
    });
  });
});
function getData(listName){
    return $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "GET",               
        headers: {
            "Accept": "application/json;odata=verbose",
        }  
    });
}
function createNavigation() {
  alert("Build Navigation");
}
</script>

Answer 2

Try using your code in below format:

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

$(document).ready(function() {
   getNavData("Navigation").then(function(listData) {
      cacheNavData = listData;
   }, function(error) {
      console.log(error):
   }) ;

});

function getNavData(lName) {
  var dfd = $.Deferred();

  var endPointUrl = "../_api/web/lists/getbyTitle('" + lName + "')/items";

  var headers = { accept: "application/json;odata=verbose" };

  $.ajax({
    url: endPointUrl,
    type: "GET",
    headers: headers,
    success: function success(data) {
       var listData = [];
       if(data.d.results && data.d.results.length) {
           listData = data.d.results;
       } 
       dfd.resolve(lisData);
    },
    error:function(err){
       dfd.reject(err);
    }
  });
  return dfd.promise();
}