I have a scenario that I've been coming across more and more lately while creating apps with Angular. I'd love some advice on best practices and/or how others handle this type of issue.
I'm currently building an app with a Drupal API. The API exposes certain resources, but in some cases only references to other resources that I need to also make calls for and combined into one final object to use in my views. Let me paint a picture for you.
I currently have a resource that exposes an article. Within this article I get a basic set of data that also makes reference to that articles list of comments via user name. So when I pull this data into my view I need to then make multiple separate calls to each comment resource to pull that data in and combined it with the current article data.
For example my article resrouce returns:
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",…}
As you can see the resource returns the article and then an array of comments. What I need to be able to do is make a call using the comment author and pull in their extended comment information and inject it into this array to use in my view.
My view currently displays the data of the article normally, but for the comments I user a simple ng-repeat to display all the comment data.
<div class="" ng-repeat="note in row.comments">
</div>
I thought a push would work, but instead it seems to only push the second call into the array itself which then just adds the new data to the end of the array. Instead I need that data to be append to the end of each item.
So:
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",…}
becomes:
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"}
My controller looks something like:
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;
}
});
However this just adds the results from the second call as new items within $scope.row.comments[] as I've shown above.
I'm feel like this type of problem is surfacing more and more where the apis I work with have reference data where I need to make another call in order to build my final data result. Does anyone have any guidance on this issue as a whole?
I fully understand promises and loading in data parallel, but in these cases the desire is to create one source of data for my NG-repeat. Maybe I dont even need to do it this way, and I'f im doing it wrong I'm all ears.
