AngularJS - 处理服务中的异步数据 [英] AngularJS - Processing asynchronous data in service
问题描述
我想获得服务，这需要进一步的处理有一些异步数据。在code是在这里 plnkr ，
我模拟与超时一个异步呼叫，并且一旦接收到数据，用户界面被更新。
但是，我也需要处理在我的UI服务（doubleData）和以后使用的数据。我说，我需要用一些细节来增加数据。
一直以来，数据为空时， {{doubleData（）}} 被调用，它永远不会填充它。我怎样才能实现的方式在我的服务进一步处理数据？（其中填充异步 - 说$ HTTP）
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../../../角1.0.2 / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的script.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=MainCtrl＆GT;
{{}数据}＆LT; BR＆GT;
{{doubleData（）}}
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
的script.js
VAR应用= angular.module（'对myApp'，[]）;app.factory（'为myService'，函数（$超时）{
VAR数据= []
doubleData = []; 变种为myService = {};
myService.async =功能（）{
$超时（函数（）{
data.length = 0;
为（变量I = 0; I＆小于10;我++）{
data.push（{VAL：的Math.random（）}）;
}
}，5000）;
};
myService.data =函数（）{返回数据; };
myService.doubleData =功能（）{
doubleData = []
对于（VAR I = 0; I＆LT; data.length;我++）{
doubleData.push（{VAL：10 *数据[I]}）;
};
返回doubleData;
}; 返回为myService;
}）;app.controller（'MainCtrl'，功能（为myService，$范围）{
myService.async（）;
$ scope.data = myService.data（）;
$ scope.doubleData = myService.doubleData;}）;
输出（经过5秒）：
<$p$p><$c$c>[{\"val\":0.4908415926620364},{\"val\":0.25592787051573396},{\"val\":0.8326190037187189},{\"val\":0.6478461190126836},{\"val\":0.8502937415614724},{\"val\":0.19280604855157435},{\"val\":0.06115643493831158},{\"val\":0.5100495833903551},{\"val\":0.4134843284264207},{\"val\":0.5548313041217625}][{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null},{\"val\":null}]
它看起来像你的问题是循环在你的一个错字，你需要访问数据[I] .VAL ：
为（VAR I = 0; I＆LT; data.length;我++）{
doubleData.push（{VAL：10 *数据[I] .VAL}）;
};
另一种方式来做到这一点（不看更改变量）将绑定 doubleData 要绑定到数据以同样的方式并调用您的异步回调函数来清空和填充 doubleData 与计算值。看到这个 plnkr 一个例子。
I want to get some asynchronous data in service, which needs to further processed there. The code is here at plnkr,
I simulate an async call with timeout, and once the data is received, the UI is updated. But, I also need to process the data in service (doubleData) and later use in my UI. Say, I need to augment the data with some specifics.
Since, data is null when {{doubleData()}} is called, it never populates it. How can I achieve a way to process data further in my service(which is populated async - say $http)?
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="../../../angular-1.0.2/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
{{data}}<br>
{{doubleData()}}
</div>
</body>
</html>
script.js
var app = angular.module('myApp',[]);
app.factory('myService', function($timeout) {
var data = [],
doubleData = [];
var myService = {};
myService.async = function() {
$timeout(function(){
data.length = 0;
for(var i = 0; i < 10; i++){
data.push({val: Math.random()});
}
}, 5000);
};
myService.data = function() { return data; };
myService.doubleData = function() {
doubleData = []
for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i]});
};
return doubleData;
};
return myService;
});
app.controller('MainCtrl', function( myService,$scope) {
myService.async();
$scope.data = myService.data();
$scope.doubleData = myService.doubleData;
});
Output (after 5 sec):
[{"val":0.4908415926620364},{"val":0.25592787051573396},{"val":0.8326190037187189},{"val":0.6478461190126836},{"val":0.8502937415614724},{"val":0.19280604855157435},{"val":0.06115643493831158},{"val":0.5100495833903551},{"val":0.4134843284264207},{"val":0.5548313041217625}]
[{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null}]
It looks like your issue is a typo in your for loop you need to access data[i].val:
for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i].val});
};
Another way to do this (without watching for changes to variables) would be to bind doubleData the same way you are binding to data and call a function in your async callback to empty and populate doubleData with the calculated value. See this plnkr for an example.
这篇关于AngularJS - 处理服务中的异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
