Nested Loops in ajax call / angular

Question

I'm trying to Loop trough a variable, search for the ID's and then make an ajax call to get the Detailcontent of the different ID's in the Success function I try to loop trough the received content and get the emails out.

It is working but i get the first email twice in my $scope.subContactmail. I think there is a problem with the loop but i don't get it. Was trying to figure it out the whole night and unfortunately no idea came trough. The idea should be that if the first loop is finished it will start with the second loop. But at the moment the first loop goes trough the second as well.

Problaby your pros out there can help me with this problem.

Looking forward for your help!

Here is the specific part of my angular app file:

//find all contract relations id's from customer
      $scope.contactrelation = function (input) {
      $http.post('http://localhost/mamiexpress/mamiAPI/includes/php/searchContactsRelation.php', input).
          success(function(data, status, headers, config) {
          $scope.subContactDetails =  [];
          $scope.subContactmail =  [];
          $scope.subContactId = data;
          console.log($scope.subContactId);

              //GET ALL the subcontact ID's from the selected item
                var i=0;
                var subContactIdlenght = $scope.subContactId.length;
                while  (i < subContactIdlenght) {
                console.log($scope.subContactId[i].contact_sub_id);
                var number = $scope.subContactId[i].contact_sub_id;
                i = i + 1;

              //Send the ID to the API and get the user Details
                $http.post('http://localhost/mamiexpress/mamiAPI/includes/php/searchContactswithID.php', number).
                    success(function(data, status, headers, config) {
                        $scope.subContactDetails.push(data); // store it in subContactDetails
                        console.log($scope.subContactDetails);


                       //HERE COULD BE THE PROBLEM!!
                       // I want this loop to start when the first loop is finished but i have to run this in this success function.
                       // At the moment i get the first email twice!

                       //Loop trough ContactDetails and get the emails.   
                       if (i == subContactIdlenght){ 
                           var subContactDetailslength = $scope.subContactDetails.length;
                              for(var p=0; p < subContactDetailslength; p++) {
                              console.log($scope.subContactDetails[p].mail);
                              var number = $scope.subContactDetails[p].mail;
                              $scope.subContactmail.push(number);
                              };   
                        };

                    }).
                    error(function(data, status, headers, config) {
                    $scope.errormessage = data;
                    console.log(data);
                    });

                 };//ENDWHILE


        console.log(data);
        }).
        error(function(data, status, headers, config) {
         $scope.errormessage = data;
          console.log(data);
        });

Ahmed Adel · Accepted Answer · 2015-02-09 13:03:19Z

2

you have 2 solutions

Use the promise API (recommended):

something like that

var wheatherPromise = $http.get(...);
var timePromise = $http.get(...);

var combinedPromise = $q.all({
    wheather: wheatherPromise,
    time: timePromise
})

combinedPromise.then(function(responses) {
    console.log('the wheather is ', responses.wheather.data);
    console.log('the time is ', responses.time.data);
});

OR

simply do the following:

make ur $http request in a seperated function or (AJS service is recommended).
call that function in a for loop based on ur list
declare a scope variable holds an empty array inside the function
push response objects in the array

avoid defining $http.get inside a for loop which cause unexpected behavior

answered Feb 9, 2015 at 13:03

Ahmed Adel

1811 gold badge6 silver badges15 bronze badges

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

2 Comments

elpeyotl Over a year ago

Thank you. Guys. So i shold go for promises then. Never used that. I will get into this article andyshora.com/promises-angularjs-explained-as-cartoon.html. Hmm and this solution with the separated function could be working. I will try that....

Ahmed Adel Over a year ago

if that article satisfy your case then answer ur question by your conclusion from this article and accept your answer to help others.

Drath Vedro · Accepted Answer · 2015-02-09 12:56:54Z

0

I think what you need is promises/deferred API here.

answered Feb 9, 2015 at 12:56

Drath Vedro

3302 silver badges10 bronze badges

Collectives™ on Stack Overflow

Nested Loops in ajax call / angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related