从对象数组发出多个请求,并使用Angular扩展数据

时间:2016-08-18 22:36:27

标签: angularjs angular-ui-router angular-services

我们说我有一系列书籍,我从/api/books这样的端点获取。

[{
  name: 'Book 1',
  id: 1
}, {
  name: 'Book 2',
  id: 2
}, {
  name: 'Book 3',
  id: 3
}]

我有一个BookService可以检索单个图书的类别。例如,这会向/api/book/:id/categories发出请求。

bookService的

function BookService($resource) {
  var service = $resource('/api/books', {}, {
    getAll: {
      method: 'GET'
    },
    getCategories: {
      url: '/api/book/:id/categories',
      method: 'GET',
      isArray: true
    },
  });

  return {
    getAll: getAll,
    getCategories: getCategories
  };
}

在我的路线中,我有一个决心(使用ui-router)首先获取所有书籍并注入BookCtrl

resolve: {
  books: ['BookService', function(BookService) {
    return BookService.getAll();
  }]
}

在我的示例控制器中,我想用每本书的类别来增加books解析结果。例如,我希望我的控制器books类似于以下内容:

[{
  name: 'Book 1',
  id: 1,
  categories: ['adult', 'horror']
}, {
  name: 'Book 2',
  id: 2,
  categories: ['scifi']
}, {
  name: 'Book 3',
  id: 3,
  categories: ['comedy']
}]

如何创建额外的解析(或使用已存在的解析)来完成此任务?

resolve: {
  books: ['BookService', function(BookService) {
    return BookService.getAll();
  }],
  bookCategories: ['BookService', 'books', function(BookService, books) {
    // this doesnt work 
    _.each(books, function(book) {
      BookService.getCategories(book.id)
        .then(function(categories) {
          book.categories = categories;
        })
    });
    // how do i return this to the controller properly?
  }],
}

function BookCtrl(books, bookCategories) {
  // maybe somsething like this?
  var booksWithCategories = _.extend(books, bookCategories);
}

1 个答案:

答案 0 :(得分:0)

resolve: {
  books: ['BookService', function(BookService) {
    return BookService.getAll();
  }],
  bookCategories: ['$q', 'BookService', 'books', function($q, BookService, books) {
    var promises = [];
    _.each(books, function(book) {
      promises.push(BookService.getCategories(book.id)
        .then(function(categories) {
          book.categories = categories;
        }));
    });
    return $q.all(promises);
  }],
}