我正在尝试将本地json文件加载到与我的服务文件相同的目录中。
没有JS错误，在Net选项卡下，我可以看到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"}
];
答案 0 :(得分：18)
您是否有理由不使用$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;
});
这是固定代码：
无论如何，你的问题是你返回了诺言但从未解决过（deferred.resolve）它。在这一行
promised.then(callback(static_obj))
您不解决承诺，而是手动调用callback一些数据。它起作用，因为在硬编码的json对象的情况下，它已经在页面中可用，但是在ajax请求的情况下，你试图在响应来之前调用它。因此，您需要将promised.then(callback(static_obj))移至onreadystatechange函数中。但是如果你采用这种方式，你根本不需要推迟和承诺，你只需要使用回调。