[英]$http get request not finishing in time in angularjs/ionic
I'm trying to fill options with values instead of undefined, but seems to keep getting the values after the select box has finished loading. 我正在尝试用值而不是未定义的值填充选项,但是似乎在选择框完成加载后一直获取值。
HTML: HTML:
<label for="to">Destination:
<select id="to" name="to" ng-model="toSelected" data-ng-options="stop.stop_id as stop.name for stop in stops">
<option value="">Choose a Destination</option>
</select>
</label>
AngularJS Factory: AngularJS工厂:
.factory('DataFactory', ['$http', function ($http) {
// Might use a resource here that returns a JSON array
return {
getAllStops: function () {
return $http({
method: 'GET',
url: 'https://myAPIURL.com/api',
headers: {
"Accept": "application/json",
"X-Mashape-Key": "KEYKEYKEYKEYKEYKEYKEYKEYKEYKEYKEY"
}
}).then(function (res) {
return res;
})
},
getAllRoutes: function () {
return someresult similar to the above function;
// more functions.
}
AngularJS Controller: AngularJS控制器:
.controller('MainCtrl', ['$scope', '$http', '_', 'DataFactory', function ($scope, $http, _, DataFactory) {
$scope.fromSelected = "";
$scope.toSelected = "";
DataFactory.getAllStops().then(function successCallback(res) {
console.log(res);
$scope.stops = res.data;
}, function errorCallback(err) {
console.log("error: ");
console.log(err);
});
$scope.changed = function (location, destination) {
console.log($scope.stops);
$scope.possibleRoutes = DataFactory.getPossibleRoutes(location, destination);
Consider initializing $scope.stops
with placeholder data (ie $scope.stops = [{stop_id: false, name: 'Loading'}]
. 考虑使用占位符数据初始化$scope.stops
(即$scope.stops = [{stop_id: false, name: 'Loading'}]
。
Alternatively, you could use an ng-if to load the select box when your data is done loading. 或者,可以在数据加载完成后使用ng-if加载选择框。
Ex. 例如
<div class="input" ng-if="stops">
<label for="to">Destination:
<select id="to" name="to" ng-model="toSelected" data-ng-options="stop.stop_id as stop.name for stop in stops">
<option value="">Choose a Destination</option>
</select>
</label>
</div>
And in the controller nothing really changes. 在控制器中,什么都没有改变。 This assumes you do not initialize $scope.stops 假设您没有初始化$ scope.stops
DataFactory.getAllStops().then(function successCallback(res) {
console.log(res);
$scope.stops = res.data;
}, function errorCallback(err) {
console.log("error: ");
console.log(err);
// TODO: Gracefully degrade
});
Another option would be to do the above while showing a loading state while $scope.stops is undefined. 另一个选择是在$ scope.stops未定义时显示加载状态时执行上述操作。 That would work similarly to above. 这将与上面类似。
Your factory isn't returning a promise as expected in your factory. 您的工厂没有按照工厂的预期兑现承诺。 Remove then 'then' from the factory as follow to return a promise, or the http request.: 按照以下步骤从工厂中删除然后“然后”以返回承诺或http请求:
.factory('DataFactory', ['$http', function ($http) {
// Might use a resource here that returns a JSON array
return {
getAllStops: function () {
return $http({
method: 'GET',
url: 'https://myAPIURL.com/api',
headers: {
"Accept": "application/json",
"X-Mashape-Key": "KEYKEYKEYKEYKEYKEYKEYKEYKEYKEYKEY"
}
})
},
getAllRoutes: function () {
return someresult similar to the above function;
// more functions.
}
The controller is handling the promise correctly once that change is made assuming you're getting a response. 一旦做出更改,控制器就会正确处理承诺,并假设您已收到响应。
Also, verify that "stop_id" is on the actual response. 另外,请验证实际响应中是否包含“ stop_id”。 As opposed to... stopID or something. 与... stopID之类的相反。 if stopID is there, but you're pulling stop.stop_id, it would show as undefined. 如果存在stopID,但您要拉出stop.stop_id,它将显示为undefined。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.