0

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");
}

2 Answers 2

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>
1
  • worked like a charm. Thanks!
    – OLA
    Feb 12, 2020 at 17:42
1

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();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.