如何从JSON对象中的promise返回数据? angularjs

时间:2017-07-21 21:48:32

标签: javascript angularjs promise

这是我第一次尝试从JSON对象中的promise返回数据时,我坚持使用此任务

这种常见的方式是这样的

service js

 app.factory("dataService", ["$http",
    function ($http) {
      function getData(id) {
        return $http.get('endpoint', id)
            .then(function (response) {
                return response.data
            });
    }

   return {
     getData: getData
   }

}])

控制器js

$scope.data = {}

dataService.getData($routeParams.id)
   .then (function (res) {
        $scope.data = res
    });

这很好用,每个人都很开心

现在我试图在对象

中分配数据

控制器js

 angular.forEach($scope.properties, function (item) {
                      $scope.data.properties.push({
                          order: item.number,
                          name: item.name,
                          value: item.value,
                          items: $scope.getProp(item.id)
                      })
                  });

 $scope.getProp = function (id) {
            return dataService.single(id)
                .then (function (res) {return res});
        };

service js

function single(id) {
            return $http.get('endpoint' + "/" + id)
                .then(function (response) {
                    return response.data
                })
        }

现在我在

中获得带有promise和$$状态的JSON对象

我理解这个问题的本质但是这个问题的解决方案超出了我的知识范围,所以有人可以帮我处理它吗?

1 个答案:

答案 0 :(得分:1)

使其发挥作用的一种方法是:

$scope.data.properties = [];
var promiseList = $scope.properties.map(function(item) {

    var promise = $scope.getProp(item.id);

    return promise.then(function (data) {
        var newItem = {
            id: item.id,
            order: item.number,
            name: item.name,
            value: item.value,
            items: data
        };   
        $scope.data.properties.push(newItem);
        return newItem;
    });
});

$q.all(promiseList).then(function(itemList) {
    console.log(itemList);
    //More code here
});

上面的示例创建一个promises列表,该列表返回具有items属性的对象,该属性使用$scope.getProps返回的promise中的数据填充。

此外,它会将每个填充的项目推送到范围。由于异步XHR可能无法按启动顺序完成,因此范围列表的顺序可能与原始顺序不同。

然而$q.all method将等待所有XHR完成并按原始顺序返回列表。