AngularJS combining web service responses

ajax, angularjs, angularjs-service

Solution

When communicating with API, I would recommend the following approach to structuring your services (as 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;
                  });
              });
            }

          }
        ]
      );

But for sure, I would also advise against fetching all this data in separate calls. Instead, if possible, you should have your API return you the combined JSON. Server-side combining would be many times faster.

Problem

I have two web services: One returns "Articles" like this: ``` [ { "id": "1", "headline": "some text", "body": "some text", "authorId": "2" }, { "id": "2", "headline": "some text", "body": "some text", "authorId": "1" } ] ``` And the other one returns an "Author" like this, given an id: ``` { "id": "1", "name": "Test Name", "email": "test@test.com", "photo": "path/to/img" } ``` I want to combine the two, so I can display the authors name and photo in an article overview list. Like this: ``` [ { "id": "1", "headline": "some text", "body": "some text", "authorId": "2", "author_info": { "id": "2", "name": "Another Test Name", "email": "test2@test.com", "photo": "path/to/img" } }, { "id": "2", "headline": "some text", "body": "some text", "authorId": "1" "author_info": { "id": "1", "name": "Test Name", "email": "test@test.com", "photo": "path/to/img" } } ] ``` I have an "Articles" service that fetches the articles, but what's the best approach for enriching the returned JSON with the author info from the similar "Authors" service before returning the "Articles" service output? ``` 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; }]) ``` Please also tell me if this is an entirely wrong approach. :)

Original source