通过angularjs $ resource获取数据

时间:2016-07-23 15:33:23

标签: javascript angularjs angularjs-scope angular-resource

我有以下angularJS函数通过$ resource获取数据,它可以工作并将此数据推送到vm.data数组,但是当我尝试在控制器中获取vm.data时,我得到null,以下的最后一行代码打印空值

   function loadAll() {
    Questiongroup.query({}).$promise.then(function(group){
        console.log(group);
        for(var i=0;i<group.length;i++){
           var grouptitle=group[i].title
            Question.questionsByQuestionGroup({id:group[i].id}).$promise.then(function(question){
                vm.question = question; 
               for(var j=0;j<question.length;j++){
                   vm.data.push({ group: grouptitle, question: question[j].question , questiontype: question[j].type });

                   console.log(vm.data)      //this line print correct data 
                   }
         });
        }
      });
    }

    loadAll();
    console.log(vm.data);         //This line print null

1 个答案:

答案 0 :(得分:2)

上次console.log打印null的原因是它在<{>> 赋予.then方法的函数之前执行。在数据从服务器返回后,.then服务会调用$q方法作为参数的函数。

loadAll函数应返回派生的承诺,可用于在组装后检索vm.data 。这涉及链接承诺并使用$q.all方法。

function loadAll() {
    var topPromise = Questiongroup.query({}).$promise;

    var derivedPromise = topPromise.then(function(group){
        var promiseList = [];
        console.log(group);
        for(var i=0;i<group.length;i++){
            var itemPromise  = getItemPromise(group[i]);
            promiseList.push(itemPromise);                        
        };
        //return $q.all promise for chaining
        return $q.all(promiseList);
    });

    //return promise
    return derivedPromise;
};

然后使用返回的promise。

var loadAllPromise = loadAll();

loadAllPromise.then(function (vmData) {
    console.log(vmData);
});

上面的示例演示了如何创建一个promise,它从promises数组中返回一组数据。直观地将其扩展到多个迭代级别是显而易见的。

AngularJS $q.all也适用于哈希。

function loadAll() {
    var topPromise = Questiongroup.query({}).$promise;

    var derivedPromise = topPromise.then(function(group){
        var promiseHash = {};
        console.log(group);
        for(var i=0;i<group.length;i++){
            var itemPromise  = getItemPromise(group[i]);
            promiseHash[group[i].id] = itemPromise;                        
        };
        //return $q.all promise for chaining
        return $q.all(promiseHash);
    });

    //return promise
    return derivedPromise;
};

上面的示例返回一个包含数据哈希(关联数组)的promise。

loadAllPromise.then(function (dataHash) {
    console.log(dataHash);
});

来自文档:

  

所有(许诺);

     

将多个promises组合成一个promise,当所有输入promise都被解析时解析。

     

<强>参数

     

承诺的数组或散列。

     

<强>返回

     

返回将使用值的数组/散列解析的单个promise,每个值对应于promises数组/散列中相同索引/键的promise。如果任何承诺通过拒绝得到解决,则此结果承诺将被拒绝并具有相同的拒绝价值。

- AngularJS $q Service API Reference -- $q.all