AngularJS合并Web服务响应

Question

我有两个Web服务：

一个回报“文章”是这样的：

[ 
    { 
     "id": "1", 
     "headline": "some text", 
     "body": "some text", 
     "authorId": "2" 
    }, 
    { 
     "id": "2", 
     "headline": "some text", 
     "body": "some text", 
     "authorId": "1" 
    } 
] 

而另外一个返回“作者”这样，给定一个ID：

{ 
    "id": "1", 
    "name": "Test Name", 
    "email": "[email protected]", 
    "photo": "path/to/img" 
} 

我想将两者结合起来，所以我可以在文章概览列表中显示作者姓名和照片。

像这样：

[ 
    { 
     "id": "1", 
     "headline": "some text", 
     "body": "some text", 
     "authorId": "2", 
     "author_info": { 
      "id": "2", 
      "name": "Another Test Name", 
      "email": "[email protected]", 
      "photo": "path/to/img" 
     } 
    }, 
    { 
     "id": "2", 
     "headline": "some text", 
     "body": "some text", 
     "authorId": "1" 
     "author_info": { 
      "id": "1", 
      "name": "Test Name", 
      "email": "[email protected]", 
      "photo": "path/to/img" 
     } 
    } 
] 

我有一个“公司章程”的服务，在返回之前获取的物品，但什么是最好的方法与来自类似的“作者”的作者信息丰富返回的JSON服务“文章”服务输出？

factory('Authors', ['$http', function($http){ 
    var Authors = { 

     data: {}, 

     get: function(id){ 
      return $http.get('/api/authors/' + id + '.json') 
       .success(function(data) { 
        Authors.data = data; 
       }) 
       .error(function() { 
        return {}; 
       }); 
     } 
    }; 

    return Authors; 
}]). 

factory('Articles', ['$http', 'Authors', function($http, Authors){ 
    var Articles = { 

     data: {}, 

     query: function(){ 
      return $http.get('/api/articles.json') 
       .success(function(result) { 
        Articles.data = result; // How to get the author info into this JSON object??? 
       }) 
       .error(function() { 
        Articles.data = []; 
       }); 
     } 
    }; 
    return Articles; 
}]) 

另请告诉我，这是一个完全错误的方法。 :)

Answer 1

一个选项是将所有这些数据结合在服务器上，也许创建一个单独的json文件。这将简化客户端，只需要一个HTTP请求而不是两个。

如果你保持这两种服务（这不是一个坏的方法），你可以启动一个，等待答案并开启第二个。也许做Articles第一，然后Authors：

Articles.get(function (articles) {     
      $scope.articles = articles; 
      //fire query for Authors 
      Authors.query(function (authors) { 
       $scope.authors= authors; 
       //combine both articles and authors 
       combineData(articles, authors);      
      }) 
}); 

这里是功能结合了数据：

function combineData(articles, authors){ 
    $.each(articles, function (i, article) { 
     //find author 
     var author = $.grep(authors, function(a, j){ 
        return a.id == article.authorId; 
        }); 
     //set article's author 
     article.author_info = author; 
    }); 
} 

请注意，这个配置你的文章将呈现（通过设置$scope.articles）甚至在拨打电话之前Authors.query

Answer 2

在与API进行通信时，我会推荐以下方法来构建您的se rvices（如advised by Misko Hevery）：

// Author model/service 
    angular.module('myApp').factory('Author', function($http) { 
     var Author = function(data) { 
     angular.extend(this, data); 
     }; 

     Author.get = function(id) { 
     return $http.get('/authors/' + id).then(function(response) { 
      return new Author(response.data); 
     }); 
     }; 

     return Author; 
    }); 

    // Article model/service 
    angular.module('myApp').factory('Article', function($http) { 
     var Article = function(data) { 
     angular.extend(this, data); 
     }; 

     Article.query = function() { 
     return $http.get('/articles/').then(function(response) { 
      var articles = []; 
      angular.forEach(response.data, function(data){ 
      articles.push(new Article(data)); 
      }); 
      return articles; 
     }); 
     }; 

     return Article; 
    }); 

    // Your controller 
    angular.module('myApp') 
     .controller('Ctrl' 
     ,[ 
      '$scope' 
      ,'Article' 
      ,'Author' 
      ,function($scope, Article, Author){ 
      Article.query() 
       .then(function(articles){ 
       $scope.articles = articles; 
       attachAuthors(articles); 
       }); 

      function attachAuthors(articles){ 
       angular.forEach(articles, function(article){ 
       Author.get(article.authorId) 
        .then(function(author){ 
        article.author = author; 
        }); 
       }); 
      } 

      } 
     ] 
    ); 

但是可以肯定，我也建议不要在获取单独调用所有数据。相反，如果可能的话，你应该让你的API返回给你组合的JSON。服务器端组合的速度要快很多倍。

Answer 3

查看JSOG。这是做这种事情的完美之选。目前有用于Java，Python，Javascript和Ruby的服务器实现。在客户端JavaScript端，你只需调用JSOG.decode（object）。我大量使用Angular。

https://github.com/jsog/jsog