title: angular load local json file via services
body: <p>I am trying to load a local json file within the same directory as my service file.</p>
  
  <p>No JS errors and under the Net tab, I can see that the json file loaded.</p>
  
  <p>Yet setting the response txt to the var "static_obj" doesn't load JSON data. When I have the JSON data hard coded var WEBTEST = {} it loads just fine. Why?</p>
  
  <pre><code>'use strict';
  
  webTestApp.factory('webtest', function ($q, $timeout) {
  var Webtest = {
      //Methods exposed for the class
      fetch: function(callback){
          //fetch the data from below hard coded
          var deferred = $q.defer();        
          var static_obj = [];
          var promised = deferred.promise;
          var xobj = new XMLHttpRequest();
  
          //giving an artificial delay of .03 seconds..
          //controller will render the page &amp; will show the service data after .03 seconds
          $timeout(function(){
              xobj.overrideMimeType("application/json");
              xobj.open('GET', 'angular/scripts/services/webtest.json', true);
              xobj.onreadystatechange = function () {
                  if (xobj.readyState == 4 &amp;&amp; xobj.status == "200") {
                      static_obj = $.parseJSON(xobj.responseText);
                  }
              };
              xobj.send(null);
              promised.then(callback(static_obj))
          }, 30);
  
          return promised;
      }
  }
  
  return Webtest;
  });
  </code></pre>
  
  <p>The following code works just fine, but I want to be able to load json files rather than hard code the JSON.</p>
  
  <pre><code>'use strict';
  
  webTestApp.factory('webtest', function ($q, $timeout) {
  var Webtest = {
      //Methods exposed for the class
      fetch: function(callback){
          //fetch the data from below hard coded
          var deferred = $q.defer();        
          var static_obj = null;
          var promised = deferred.promise;
  
          //giving an artificial delay of .03 seconds..
          //controller will render the page &amp; will show the service data after .03 seconds
          $timeout(function(){
              static_obj = WEBTEST;
              promised.then(callback(static_obj))
          }, 30);
  
          return promised;
      }
  }
  
  return Webtest;
  });
  
  var WEBTEST = [
  {"id": "0","Name": "Items 0", "Description": "Description 0"},
  {"id": "1","Name": "Items 1", "Description": "Description 1"},
  {"id": "2","Name": "Items 2", "Description": "Description 2"},
  {"id": "3","Name": "Items 3", "Description": "Description 3"},
  {"id": "4","Name": "Items 4", "Description": "Description 4"},
  {"id": "5","Name": "Items 5", "Description": "Description 5"},
  {"id": "6","Name": "Items 6", "Description": "Description 6"},
  {"id": "7","Name": "Items 7", "Description": "Description 7"},
  {"id": "8","Name": "Items 8", "Description": "Description 8"},
  {"id": "9","Name": "Items 9", "Description": "Description 9"},
  {"id": "10","Name": "Items 10", "Description": "Description 10"},
  {"id": "11","Name": "Items 11", "Description": "Description 11"},
  {"id": "12","Name": "Items 12", "Description": "Description 12"},
  {"id": "13","Name": "Items 13", "Description": "Description 13"},
  {"id": "14","Name": "Items 14", "Description": "Description 14"},
  {"id": "15","Name": "Items 15", "Description": "Description 15"},
  {"id": "16","Name": "Items 16", "Description": "Description 16"},
  {"id": "17","Name": "Items 17", "Description": "Description 17"},
  {"id": "18","Name": "Items 18", "Description": "Description 18"},
  {"id": "19","Name": "Items 19", "Description": "Description 19"},
  {"id": "20","Name": "Items 20", "Description": "Description 20"},
  {"id": "21","Name": "Items 21", "Description": "Description 21"},
  {"id": "22","Name": "Items 22", "Description": "Description 22"},
  {"id": "23","Name": "Items 23", "Description": "Description 23"},
  {"id": "24","Name": "Items 24", "Description": "Description 24"},
  {"id": "25","Name": "Items 25", "Description": "Description 25"},
  {"id": "26","Name": "Items 26", "Description": "Description 26"},
  {"id": "27","Name": "Items 27", "Description": "Description 27"},
  {"id": "28","Name": "Items 28", "Description": "Description 28"},
  {"id": "29","Name": "Items 29", "Description": "Description 29"},
  {"id": "30","Name": "Items 30", "Description": "Description 30"},
  {"id": "31","Name": "Items 31", "Description": "Description 31"},
  {"id": "32","Name": "Items 32", "Description": "Description 32"},
  {"id": "33","Name": "Items 33", "Description": "Description 33"},
  {"id": "34","Name": "Items 34", "Description": "Description 34"},
  {"id": "35","Name": "Items 35", "Description": "Description 35"},
  {"id": "36","Name": "Items 36", "Description": "Description 36"},
  {"id": "37","Name": "Items 37", "Description": "Description 37"},
  {"id": "38","Name": "Items 38", "Description": "Description 38"},
  {"id": "39","Name": "Items 39", "Description": "Description 39"},
  {"id": "40","Name": "Items 40", "Description": "Description 40"},
  {"id": "41","Name": "Items 41", "Description": "Description 41"},
  {"id": "42","Name": "Items 42", "Description": "Description 42"},
  {"id": "43","Name": "Items 43", "Description": "Description 43"},
  {"id": "44","Name": "Items 44", "Description": "Description 44"},
  {"id": "45","Name": "Items 45", "Description": "Description 45"}
  ];
  </code></pre>