угловая загрузка локального файла json через сервисы

Я пытаюсь загрузить локальный файл json в тот же каталог, что и мой служебный файл.

Нет ошибок JS, и на вкладке «Сеть» я вижу, что файл json загружен.

Тем не менее, установка ответа txt на var «static_obj» не загружает данные JSON. Когда у меня есть данные JSON, жестко закодированные var WEBTEST = {}, они загружаются просто отлично. Почему?

'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;
});

Следующий код работает отлично, но я хочу иметь возможность загружать файлы json, а не жестко кодировать 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"}
];

javascript json angularjs factory
person kronus    schedule 25.02.2014    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Есть ли причина, по которой вы не используете встроенную службу $http для получения JSON? С ним может быть проще:

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;
});

и в контроллере:

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

Вот фиксированный код:

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

В любом случае, ваша проблема заключалась в том, что вы вернули обещание, но так и не разрешили (deferred.resolve) его. в этой строке

promised.then(callback(static_obj))

вы не разрешаете обещание, а вручную вызываете callback с некоторыми данными. Это сработало, потому что в случае жестко закодированного объекта json он уже доступен на странице, но в случае запроса ajax вы пытались вызвать его до того, как пришел ответ. Таким образом, вам нужно будет переместить promised.then(callback(static_obj)) в функцию onreadystatechange. Но если вы пойдете по этому пути, вам вообще не нужны deferred и promise, вы просто используете обратный вызов.

person dfsq    schedule 25.02.2014
comment
Я только что попробовал ваш код, но он делает то же самое, что и мой код. Я все еще не вижу заполнения данных. У меня также есть контроллер, установленный так, как у вас выше, но ваш код более эффективен. - person kronus; 25.02.2014
comment
Сравните мой пример из работающего плункера с вашим кодом, там должна быть простая ошибка. - person dfsq; 25.02.2014
comment
Я вижу, что ваш код работает в Pinkr. Есть ли способ, которым я могу загрузить почтовый индекс моего проекта. Возможно, проблема в представлениях. Я также пытаюсь разбить на страницы и ограничить только 15 элементами в разделе. - person kronus; 25.02.2014
comment
Вы были правы, что promise.then(callback(static_obj)) должен быть в функции onreadystatechange. Спасибо. Следующий этап, чтобы выяснить, как сделать этот динамический вызов любого файла json, который я хочу. Спасибо Спасибо спасибо - person kronus; 25.02.2014