title: Storing $.getJSON data into global variable
body: <p>my-code is:</p>
  
  <pre><code>    //load-regions
      $(function(){
          var tempSession={}, provincesURL, citiesURL, selectedProvinceID;
          provincesURL = 'http://localhost/wahed/data/regions/ksa/regions.json';
          citiesURL = 'http://localhost/wahed/data/regions/ksa/cities.json';
          $.getJSON(provincesURL, function(data){
              tempSession.provinces = data;
  
          });
          $.getJSON(citiesURL, function(data){
              tempSession.cities = data;;
          });
          console.log(tempSession);
          console.log(tempSession.provinces);
      });//load-regions
  </code></pre>
  
  <p>In my console:
  <a href="https://i.stack.imgur.com/Ts5Hm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ts5Hm.png" alt="enter image description here"></a></p>
  
  <p>'tempSession' is returning both the array of objects result. 
  but problem is when I access 'tempSession.provinces' or 'tempSession.cities' both are undefined. </p>
  
  <p>What I need is to store the getJSON result into any variable so that I can access them from anywhere.</p>