title: Caching JSON data loaded from AJAX to local vars using Memoization and Promises+Deferrends in JavaScript
body: <p>In the demo JavaScript app at the bottom <code>ProjectManagementTaskModal.init()</code> is ran it check some flag variables to see if some JSON data has already previously been loaded with an AJAX request and cached locally to a variable.</p>
  
  <p>If the AJAX JSON data has not been loaded and cached yet, then an AJAX request is made to fetch the data and cache it before returning it to the code that called it.  A typical <strong>Memoization</strong>.</p>
  
  <p>My goal is to use JavaScript Promises + Deferrends with jQuery to make sure all my JSON data is loaded for the app and cached to local vars.</p>
  
  <p>I need help in making use of Promises in my app to ensure that all JSON data is loaded before performing another action.</p>
  
  <p>The demo has 2 AJAX JSON calls but in the live app this could be as many as 8 that all need to load from cached var or make AJAX request to load and in all cases make sure all are loaded before firing off code when completed.</p>
  
  <p>Instead of the typical example...</p>
  
  <pre><code>$.when(
    ProjectManagementTaskModal.ajaxLoadJson.loadUserData(user_id),
    ProjectManagementTaskModal.ajaxLoadJson.loadTaskData(task_id)
  ).then(
    function(){
      // Both URLs have been fetched completed.
    }
  );
  </code></pre>
  
  <p>The AJAX functions called above look like this...  </p>
  
  <pre><code>     // load Task data JSON with AJAX request
        loadTaskData: function(task_id) {
            return $.ajax({
              type: 'POST',
              async: true,
              contentType: 'application/json; charset=utf-8',
              dataType: 'json',
              url: getTaskRecordUrl,
              data: {
                action: 'load-task-record',
                task_id: task_id
              },
            });
        },
  </code></pre>
  
  <p>I want to cache the result of each JSON AJAX request to an app variable and in the Promise code above, it should return the data from the cached variables on future calls and only make AJAX calls when data hasn't been cached yet.</p>
  
  <p>I need to make sure cached version is returned on any of the JSON AJAX calls if it has already been loaded before.</p>
  
  <p>Any help please?</p>
  
  <hr>
  
  <pre><code>/**
   * ProjectManagementTaskModal handles all the Task Modal functionality
   * @param  {[type]} window    [description]
   * @param  {[type]} document  [description]
   * @param  {[type]} $         [description]
   * @param  {[type]} undefined [description]
   * @return {[type]}           [description]
   */
  (function (window, document, $, undefined) {
      "use strict";
  
      //we cache a few useful values, like jQuery wrapped window and document
      var $window = $(window),
        $document = $(document),
  
      ProjectManagementTaskModal = {
  
        cache: function() {
  
          isUserJsonLoaded: false,
          userJsonData: '',
          isTaskJsonLoaded: false,
          taskJsonData: '',
  
        },
  
  
        init: function() {
  
          // load user JSON data if not loaded already
          if(typeof ProjectManagementTaskModal.cache.isUserJsonLoaded != 'undefined' &amp;&amp; ProjectManagementTaskModal.cache.isUserJsonLoaded .length != 0)
          {
            // user JSON data is already loaded and cached to local var
            alert('user json data loaded');
          }else{
             // user JSON data is NOT already loaded so we need to make AJAX call to get it and cache it to local var 
            alert('user json data NOT loaded');
  
            // Make AJAX request to load User JSON data and cache for next load
            ProjectManagementTaskModal.cache.userJsonData = ProjectManagementTaskModal.ajaxLoadJson.loadUserData(user_id);          
  
            ProjectManagementTaskModal.cache.isUserJsonLoaded = true;
          }
  
          // load Task JSON data if not loaded already
          if(typeof ProjectManagementTaskModal.cache.isTaskJsonLoaded != 'undefined' &amp;&amp; ProjectManagementTaskModal.cache.isTaskJsonLoaded .length != 0)
          {
            // Task JSON data is already loaded and cached to local var
            alert('Task json data loaded');
          }else{
             // Task JSON data is NOT already loaded so we need to make AJAX call to get it and cache it to local var 
            alert('Task json data NOT loaded');
  
  
            // Make AJAX request to load Task JSON data and cache for next load
            ProjectManagementTaskModal.cache.taskJsonData = ProjectManagementTaskModal.ajaxLoadJson.loadTaskData(task_id);
  
            ProjectManagementTaskModal.cache.isTaskJsonLoaded = true;
  
          }
  
        },
  
  
        ajaxLoadJson: function() {
  
            // load User data JSON with AJAX request
            loadUserData: function(user_id) {
                return $.ajax({
                  type: 'POST',
                  async: true,
                  contentType: 'application/json; charset=utf-8',
                  dataType: 'json',
                  url: getTaskRecordUrl,
                  data: {
                    action: 'load-task-user-record',
                    task_id: task_id
                  },
                });
            },
  
            // load Task data JSON with AJAX request
            loadTaskData: function(task_id) {
                return $.ajax({
                  type: 'POST',
                  async: true,
                  contentType: 'application/json; charset=utf-8',
                  dataType: 'json',
                  url: getTaskRecordUrl,
                  data: {
                    action: 'load-task-record',
                    task_id: task_id
                  },
                });
            },
  
        },
  
  
  
      };
  
  
  
      // Run Init on DOM Ready
      $(function() {
          ProjectManagementTaskModal.init();
      });
  
  }(this, document, jQuery));
  </code></pre>
  
  <hr>