通过服务角加载本地JSON文件 [英] angular load local json file via services
本文介绍了通过服务角加载本地JSON文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想相同的目录中我的服务文件中加载本地JSON文件。
没有JS错误和Net标签下，我可以看到JSON文件加载。
然而，TXT设置为VARstatic_obj响应不加载JSON数据。当我有JSON数据很难codeD VAR WebTest的= {}它加载就好了。为什么呢？
使用严格的;webTestApp.factory（'WebTest的'，函数（$ Q $超时）{
VAR WebTest的= {
//方法暴露类
取：函数（回调）{
//从下面硬codeD读取数据
变种推迟= $ q.defer（）;
变种static_obj = [];
VAR答应= deferred.promise;
VAR xobj =新XMLHtt prequest（）; //给予0.03秒的仿真延迟..
//控制器将呈现页面和放大器;将显示0.03秒后服务数据
$超时（函数（）{
xobj.overrideMimeType（应用/ JSON）;
xobj.open（'GET'，'角/脚本/服务/ webtest.json'，真）;
xobj.onreadystatechange =功能（）{
如果（xobj.readyState == 4和＆放大器; xobj.status ==200）{
static_obj = $ .parseJSON（xobj.responseText）;
}
};
xobj.send（NULL）;
promised.then（回调（static_obj））
}，30）; 返回承诺;
}
}返回WebTest的;
}）;
以下code工作得很好，但我希望能够以相当加载JSON文件不是硬code中的JSON。
使用严格的;webTestApp.factory（'WebTest的'，函数（$ Q $超时）{
VAR WebTest的= {
//方法暴露类
取：函数（回调）{
//从下面硬codeD读取数据
变种推迟= $ q.defer（）;
VAR static_obj = NULL;
VAR答应= deferred.promise; //给予0.03秒的仿真延迟..
//控制器将呈现页面和放大器;将显示0.03秒后服务数据
$超时（函数（）{
static_obj = WebTest的;
promised.then（回调（static_obj））
}，30）; 返回承诺;
}
}返回WebTest的;
}）;VAR WebTest的= [
{ID：0，姓名：项目0，说明：说明0}，
{ID：1，姓名：项目1，说明：说明1}，
{ID：2，姓名：项目2，说明：说明2}，
{ID：3，姓名：项目3，说明：说明3}，
{ID：4，姓名：项目4，说明：说明4}，
{ID：5，姓名：项目5，说明：说明5}，
{ID：6，姓名：项目6，说明：说明6}，
{ID：7，姓名：项目7，说明：说明7}，
{ID：8，姓名：项目8，说明：说明8}，
{ID：9，姓名：项目9，说明：说明9}，
{ID：10，姓名：10项目，说明：说明10}，
{ID：11，姓名：项目11，说明：说明11}，
{ID：12，姓名：12项目，说明：说明12}，
{ID：13，姓名：13项目，说明：说明13}，
{ID：14，姓名：14项目，说明：说明14}，
{ID：15，姓名：15项目，说明：说明15}，
{ID：16，姓名：16项目，说明：说明16}，
{ID：17，姓名：17项目，说明：说明17}，
{ID：18，姓名：18项目，说明：说明18}，
{ID：19，姓名：19项目，说明：说明19}，
{ID：20，姓名：20项目，说明：说明20}，
{ID：21，姓名：21项目，说明：说明21}，
{ID：22，姓名：22项目，说明：说明22}，
{ID：23，姓名：项目23，说明：说明23}，
{ID：24，姓名：24项目，说明：说明24}，
{ID：25，姓名：25项目，说明：说明25}，
{ID：26，姓名：26项，说明：说明26}，
{ID：27，姓名：27项目，说明：说明27}，
{ID：28，姓名：28项目，说明：说明28}，
{ID：29，姓名：29项目，说明：说明29}，
{ID：30，姓名：30项目，说明：说明30}，
{ID：31，姓名：31项目，说明：描述31}，
{ID：32，姓名：32项目，说明：说明32}，
{ID：33，姓名：33项目，说明：说明33}，
{ID：34，姓名：34项目，说明：说明34}，
{ID：35，姓名：35项目，说明：说明35}，
{ID：36，姓名：36项目，说明：说明36}，
{ID：37，姓名：37项目，说明：说明37}，
{ID：38，姓名：38项目，说明：说明38}，
{ID：39，姓名：39项目，说明：说明39}，
{ID：40，姓名：40项目，说明：说明40}，
{ID：41，姓名：41项目，说明：说明41}，
{ID：42，姓名：42项目，说明：说明42}，
{ID：43，姓名：43项目，说明：说明43}，
{ID：44，姓名：44项目，说明：说明44}，
{ID：45，姓名：45项目，说明：说明45}
];
解决方案
有一个理由，为什么你不使用建立 $ HTTP 服务来获取JSON？它可以与它简单：
webTestApp.factory（'WebTest的'，函数（$超时，$ HTTP）{
VAR WebTest的= {
取：功能（）{
返回$超时（函数（）{
返回$ http.get（'webtest.json'），然后（功能（响应）{
返回response.data;
}）;
}，30）;
}
} 返回WebTest的;
}）;
和控制器中：
webtest.fetch（）。然后（功能（数据）{
$ scope.data =数据;
}）;
下面是固定的code：
http://plnkr.co/edit/f1HoHBGgv9dNO7D7UfPJ?p=$p$ PVIEW
不管怎样，你的问题是，你回来的承诺，但从来没有得到解决（ deferred.resolve ）吧。在此行
promised.then（回调（static_obj））
您不解决希望，但是手动调用回调有一些数据。它的工作，因为在硬codeD JSON的情况下，反对它在页面上已经上市，但在Ajax请求的情况下，你想叫它响应已经到来了。所以，你需要 promised.then（回调（static_obj））进入的onreadystatechange 功能。但是，如果你用这种方式，你不需要递延，并承诺去可言，你只需要使用回调。
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"}
];
解决方案
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.
这篇关于通过服务角加载本地JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
