如何组合来自多个$ resources的数据angular js

时间:2015-09-16 00:43:35

标签: javascript arrays angularjs angularjs-ng-repeat angular-resource

我有一个场景,在使用Angular创建应用时,我最近遇到的情况越来越多。我喜欢关于最佳实践的一些建议和/或其他人如何处理这类问题。

我目前正在使用Drupal API构建应用。 API公开了某些资源,但在某些情况下,只引用了我需要调用的其他资源,并将其合并到一个最终对象中以便在我的视图中使用。让我为你画一幅画。

我目前有一个公开文章的资源。在本文中,我获得了一组基本数据,这些数据也通过用户名引用了该文章的评论列表。因此,当我将此数据提取到我的视图中时,我需要对每个注释资源进行多次单独调用,以将数据提取出来并将其与当前文章数据相结合。

例如我的文章resrouce返回:

author: {uri: "url", id: "1", resource: "user"}
body: {,…}
changed: "1441238626"
comment_count: "5"    
comments: [{uri: "http://www.url.com/comment/402508", id: 402508, resource: "comment",…},…]
0: {uri: "http://www.url.com/comment/402508", id: 402508, resource: "comment",…}
1: {uri: "http://www.url.com/comment/402515", id: 402515, resource: "comment",…}
2: {uri: "http://www.url.com/comment/402427", id: 402427, resource: "comment",…}
3: {uri: "http://www.url.com/comment/402331", id: 402331, resource: "comment",…}
4: {uri: "http://www.url.com/comment/402519", id: 402519, resource: "comment",…}

正如您所看到的,资源会返回文章,然后返回一组注释。我需要做的是使用评论作者打电话并提取他们的扩展评论信息并将其注入此数组以在我的视图中使用。

我的视图目前正常显示文章的数据,但对于评论,我使用简单的ng-repeat来显示所有评论数据。

<div class="" ng-repeat="note in row.comments">
</div>

我认为推送可以工作,但它似乎只是将第二个调用推入数组本身,然后只是将新数据添加到数组的末尾。相反,我需要将数据附加到每个项目的末尾。

所以:

0: {uri: "http://www.url.com/comment/402508", id: 402508, resource: "comment",…}
1: {uri: "http://www.url.com/comment/402515", id: 402515, resource: "comment",…}
2: {uri: "http://www.url.com/comment/402427", id: 402427, resource: "comment",…}
3: {uri: "http://www.url.com/comment/402331", id: 402331, resource: "comment",…}
4: {uri: "http://www.url.com/comment/402519", id: 402519, resource: "comment",…} 

变为:

0: {uri: "http://www.url.com/comment/402508", id: 402508, resource: "comment",…}
1: {uri: "http://www.url.com/comment/402515", id: 402515, resource: "comment",…}
2: {uri: "http://www.url.com/comment/402427", id: 402427, resource: "comment",…}
3: {uri: "http://www.url.com/comment/402331", id: 402331, resource: "comment",…}
4: {uri: "http://www.url.com/comment/402519", id: 402519, resource: "comment",…}
5: {newdata: "stuff"}
6: {newdata: "stuff"}
7: {newdata: "stuff"}
8: {newdata: "stuff"}

我的控制器看起来像:

  OnenodeFactory.query({id: $stateParams.nid, 'deep-load-refs': 1}, function(data) {
    $scope.row = data;
    if (data.comments.length >= 1) {
      $scope.iscomment = true;
      var i;
      for(i = 0; i < data.comments.length; i++){
        UserFactory.query({ name: $scope.row.comments[i].comment.name}, function (usr) {  
          $scope.row.comments.push(usr); 
        });
      }      
    } else {
      $scope.iscomment = false; 
    }
  });

然而,这只是将第二次调用的结果添加为$ scope.row.comments []中的新项目,如上所示。

我觉得这种类型的问题越来越多,我使用的api有参考数据,我需要再次调用以构建我的最终数据结果。有没有人对这个问题有任何指导?

我完全理解承诺和数据并行加载,但在这些情况下,我们希望为我的NG重复创建一个数据源。也许我甚至不需要这样做,而且我做错了我的全部耳朵。

1 个答案:

答案 0 :(得分:0)

您只需要更新评论,并检查评论是否已经存在,如果没有,请去获取。

$scope.row = data; // do not delete the old $scope.comments here you should update it.

你可以做这样的事情(代码不干净而且不完整只是为了向你展示这个想法......):

var  newComments;

$scope.row.author = data.author; // do not assign comments now ...
......

if($scope.hasOwnProperty('comments')){

  // loop, and push() the new ones in newComments.
  for(var i; i < data.comments.length, i++){
     for(){ // loop $scope.rows.comments
       if($scope.row.comments[i].id === data.comments[i]){
          newComments.push(data.comments[i]);   
       }
     }
  }

}else{
   newComments= comments;    
}

// now you can loop newCommentsNames, get get them ...