angular load local json file via services

Question

I am trying to load a local json file within the same directory as my service file.

No JS errors and under the Net tab, I can see that the json file loaded.

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?

'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 & 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 && xobj.status == "200") {
                    static_obj = $.parseJSON(xobj.responseText);
                }
            };
            xobj.send(null);
            promised.then(callback(static_obj))
        }, 30);

        return promised;
    }
}

return Webtest;
});

The following code works just fine, but I want to be able to load json files rather than hard code the JSON.

'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 & 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"}
];

Answer 1

Is there a reason why you don't use build in $http service to fetch JSON? It can be simpler with it:

webTestApp.factory('webtest', function($timeout, $http) {
    var Webtest = {
        fetch: function() {
            return $timeout(function() {
                return $http.get('webtest.json').then(function(response) {
                    return response.data;
                });
            }, 30);
        }
    }

    return Webtest;
});

and in controller:

webtest.fetch().then(function(data) {
    $scope.data = data;
});

Here is fixed code:

http://plnkr.co/edit/f1HoHBGgv9dNO7D7UfPJ?p=preview

Anyway, you problem was that you returned promise but never resolved (deferred.resolve) it. in this line

promised.then(callback(static_obj))

you don't resolve promise but manually invoke callback with some data. It worked because in case of hardcoded json object it's already available in page, but in case of ajax request you tried to call it before response has come. So you would need to move promised.then(callback(static_obj)) into onreadystatechange function. But if you go with this way you don't need deferred and promise at all, you just use callback.