AngularJS - Collecting multiple get requests into json array and then passing to directive

Question

I am new to angular and been struggling how to solve my problem.

I need to access API multiple times for users data, store everything as JSON array and when all the data is collected(all results as one array) it needs to be passed to directive which will use it to draw visualization(eg. d3.js-pie chart).

$scope.allData = [];

$http.get("****link here****/students")
    .success(function (data) {
        students = data;

        for (i = 0; i < students.length; i = i + 1) {

            $http.get("**** link here ****/quest/" + students[i].id)
                .success(function (data) {
                    quest = data;

         $scope.allData.push({
                            id: quest.id,
                            value: quest.length
                        });
           }
        }

and then pass it to directive as

   <bar-chart data='allData'></bar-chart>

even if I set watch in directive and have scope as '=' the directive gets empty array.

In my other code when I just do one http get call for json array I can pass it to directive easily and it works fine.

EDIT1:

OK so I use premises now, but still allData array is 0. Even with simple example like this:

 $scope.allData = [];
 var promieses = [];
 for (i = 0; i < 10; i = i + 1) {

            promieses.push($http.get("***link***/student/" + students[i].id));
}

$q.all(promieses).then(function (data) {
    for (i = 0; i < data.length; i = i + 1) {
        $scope.allData.push("test");
    }
});

in html {{ allData ]] // 0

The code does not show any assignment to allData, where do you assign it value. — Chandermani
– Chandermani, Commented Dec 25, 2014 at 3:46
Sorry, fixed some of the variable names. Please dont look at the syntax or missing colons. It's the approach to solve this problem is what i am looking for. — ngMan
– ngMan, Commented Dec 25, 2014 at 3:47
I think the problem can be solved by using scope.$watchCollection in your directive. Share some directive code. — Chandermani
– Chandermani, Commented Dec 25, 2014 at 3:55

Shomz · Accepted Answer · 2014-12-25 04:29:37Z

2

This is a great place to unleash the power of $q. You can wait for all the promises to resolve and then process them using $q.all method. It simply Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

See this example:

students = data;
var promises = [];
for (i = 0; i < students.length; i = i + 1) {

    promises.push($http.get("**** link here ****/quest/" + students[i].id));

}

$q.all(promises).then(function(response) {
    for (var i = 0; i < response.length; i++) {
         $scope.allData.push({
             id: response[i].data.id,
             value: response[i].data.length
         });
    }
})

See it in action here: http://plnkr.co/edit/TF2pAnIkWquX1Y4aHExG?p=preview

edited Dec 25, 2014 at 4:29

answered Dec 25, 2014 at 3:50

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ngMan Over a year ago

I will test it in a second !

Shomz Over a year ago

Alright, I might've missed a comma or something, because I wrote this from the top of my head.

ngMan Over a year ago

I am trying to print {{ allData }} in html but array is 0. Give me a sec i need to get my head around it as http get /students[i].id returns an json array with multiple objects. I presume the promieses array gets the data that quest=data would normally get ?

Shomz Over a year ago

Try printing data (that originally comes from the promise). Since those are $http promises, you might need to look for data[i].data.id, for example (notice the second data there).

Shomz Over a year ago

Yup, that was the issue, sorry. $http returns status, headers, config, etc... along with the real data. See here: plnkr.co/edit/TF2pAnIkWquX1Y4aHExG?p=preview I've updated my answer with changed variable names so it's more readable.

|

Collectives™ on Stack Overflow

AngularJS - Collecting multiple get requests into json array and then passing to directive

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related