javascript - Caching JSON Arrays On Client -

i've been looking @ problem few days , don't understand i'm doing wrong. there appears few problems code cannot see wood trees this. i've included code below comments.

(function (mypage, $, undefined) {      mypage.contextsarrays = [];     mypage.currentcontextsarray = [];      mypage.gettags = function (event) {          // try resolve tags local variable         mypage.currentcontextsarray = $.grep(mypage.contextsarrays, function (elm) { return elm.id == event.tagarea.id; });          if (mypage.currentcontextsarray.length == 0) {              $.getjson('/exercises/getstrategycontexts/' + event.tagarea.id, null, function (tags) {                  // despite 200 response codes server doesn't ever executed …                 mypage.contextsarrays.push({ id: event.tagarea.id, items: tags });                 mypage.currentcontextsarray = tags;                  alert(mypage.currentcontextsarray);                 });         }          $.get('/templates/strategycontextdc.html', function (template) {              $('#taghost').html('');             $('#taghosttitle').html('tags - ' + event.tagarea.text);              // mypage.currentcontextsarray [ ]             $.each(mypage.currentcontextsarray, function (i, tag) {                  var html = mustache.to_html(template, tag);                 $('#taghost').append(html);             });         });     };  }(window.mypage = window.mypage || {}, jquery)); 

what i'm trying here basic caching of values in local variable. tags used in ui provide user method of adding score against value.

i ever want request collection of tags server if haven't been requested , stored in local variable.

what i'm not understanding $.getjson() executed (a request made , 200 code received along data) callback function never executed collections of tags never stored in array later retrieval nor set in variable of current tags use in ui (and therefore consequently can never resolved if re-requested).

i've used jquery command lot , cannot see why isn't ever executed in scenario. can't see problem code basically.

i've tried can think of (i'm still new js really) , i've exhausted knowledge on why code doesn't behave expected.

you need make sure ajax calls' callbacks fire in correct order (as 1 of them relies on other's result). use jqxhr-object's promise-interface that:

(function (mypage, $, undefined) {      mypage.contextsarrays = [];     mypage.currentcontextsarray = [];      mypage.gettags = function (event) {          // try resolve tags local variable         mypage.currentcontextsarray = $.grep(mypage.contextsarrays, function (elm) { return elm.id == event.tagarea.id; });          var dfd; //this we'll store either ajax call's promise when need wait ajax call finish or store true if don't          if (!mypage.currentcontextsarray.length) {              dfd = $.getjson('/exercises/getstrategycontexts/' + event.tagarea.id, null, function (tags) {                  // despite 200 response codes server doesn't ever executed …                 mypage.contextsarrays.push({ id: event.tagarea.id, items: tags });                 mypage.currentcontextsarray = tags;                  alert(mypage.currentcontextsarray);                  }).promise();          } else {              dfd = true;          }          $.when(dfd).then(function(){ // $.when either wait passed promise's resolve or execute function passed then() when passed true              $.get('/templates/strategycontextdc.html', function (template) {                  $('#taghost').html('');                 $('#taghosttitle').html('tags - ' + event.tagarea.text);                  // mypage.currentcontextsarray [ ]                 $.each(mypage.currentcontextsarray, function (i, tag) {                      var html = mustache.to_html(template, tag);                     $('#taghost').append(html);                 });             });         });     };  }(window.mypage = window.mypage || {}, jquery)); 

read more promise()