Promises - I get the same result after $q.all - angularjs

Question

I have this code:
return WordPress.getAllCategories()
.then(function (cats) {
var category = {};
$q.all(cats.data.map(function (cat) {
return WordPress.getLatestPostOfCategory(cat.id)
.then(function (post) {
return WordPress.getMediaById(post.data.featured_media)
.then(function (media) {
console.log('post id: ' + post.data.id);
console.log('Post title: ' + post.data.title.rendered);
category.post = {};
category.post.id = post.data.id;
category.post.title = post.data.title.rendered;
category.post.content = post.data.content.rendered;
var splitted = category.post.content.split('<p><!--more--></p>');
category.post.introAsHtml = splitted[0];
category.post.contentAsHtml = splitted[1];
category.post.thumbnail = media.data.source_url;
return category;
});
});
})).then(function (res) {
console.log(res);
});
});
To load latest articles from each category for a magazine main page (using WordPress REST api with $http requests). The process is as follow:
1. Load all categories.
2. Get latest post from each category.
3. Get the media of the latest post.
4. Build the category.post object based on the post data and add the thumbnail from the media received (post-specific).
5. After all promises are resolved, $scope.categories = categories to apply for view.
The problem:
With the code above, I can see the console logs search for different posts and medias properly, but at the end I get an array containing the categories, all posts are the same. Same title, content, thumbnail image and everything.
What am I doing wrong with the promises here?
P.S. All WordPresss service functions work properly. They return a resolved promise after receiving the necessary data via $http requests from the WordPress blog.
Regards.

Answer 1

Try this way:
return WordPress.getAllCategories()
.then(function (cats) {
$q.all(cats.data.map(function (cat) {
return WordPress.getLatestPostOfCategory(cat.id)
.then(function (post) {
return WordPress.getMediaById(post.data.featured_media)
.then(function (media) {
console.log('post id: ' + post.data.id);
console.log('Post title: ' + post.data.title.rendered);
var category = {}; // moved declaration here to return new instance each time
category.post = {};
category.post.id = post.data.id;
category.post.title = post.data.title.rendered;
category.post.content = post.data.content.rendered;
var splitted = category.post.content.split('<p><!--more--></p>');
category.post.introAsHtml = splitted[0];
category.post.contentAsHtml = splitted[1];
category.post.thumbnail = media.data.source_url;
return category;
});
});
})).then(function (res) {
console.log(res);
});
});
You were returning same category object instance, I just create new instance every time inside getMediaById callback