How to bind two variables in a template ( angularjs)

Question

I have a simple template as following :

      <ul ng-repeat="email in emails">
      <br>Email ID {{email.EmailsID}} <br>
       Unread {{email.Unread}}
       <ul>

The issue is that I need to fetch the data in two calls: The list of EmailsID from an API and the Unread value of each EmailsID from another API. Any idea how to make this work ? I've tried something below and I can fetch the the EmailsID but I don't know how to merge it with the unread value of each emailsId from the syncAPI. Currently I've hardcoded the emailsId value to 9 in the API URL as can be seen below http://local.app.com:8080/imap/syncAPI?emailsId=9

var crmApp = angular.module('crmApp', []);

crmApp.controller('EmailsCtrl', function($scope, $http) {
  $http.get('http://local.app.com:8080/emailsAPI', {withCredentials: true}).success(function(data) {
 var index;
for (index = 0; index < data.length; ++index) {
$http.get('http://local.app.com:8080/messages/imap/syncAPI?emailsId='+data.EmailsID+'&mailbox=inbox', {withCredentials: true}).success(function(unreadD) {

 data[index].unread = unreadD;
   $scope.emails = data;
      });
});

I'm new to angularjs and javascript

Create a service to return a combined array and then use this array for ng-repeat iteration? — PM 77-1
– PM 77-1, Commented Jul 25, 2014 at 23:08

ryeballar · Accepted Answer · 2014-07-25 23:40:56Z

1

The problem is you are iterating a series of asynchronous callbacks wherein each callback will definitely refer to index = emails.length when it gets invoked. i.e. all your callbacks will refer to $scope.emails[data.length] = unreadD.

Instead of using a for loop as an iterator you can use angular.forEach().

var crmApp = angular.module('crmApp', []);

crmApp.controller('EmailsCtrl', function($scope, $http) {
  $http.get('http://local.app.com:8080/emailsAPI', {withCredentials: true})
    .success(function(emails) {
       $scope.emails = emails;
       angular.forEach(emails, function(email) {
          $http.get('http://local.app.com:8080/imap/syncAPI?emailsId=' + email.EmailsID + '&mailbox=inbox', {withCredentials: true}).success(function(unreadD) {
            email.Unread = unreadD;
          });
       });
    });
});

answered Jul 25, 2014 at 23:40

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

Comments

Andy · Accepted Answer · 2014-07-25 23:40:11Z

1

It sounds like you want to use the output of your first call to emailsAPI for your second call to syncAPI. In order to achieve this put the call to syncAPI in your success callback for emailsAPI like so:

var crmApp = angular.module('crmApp', []);

crmApp.controller('EmailsCtrl', function($scope, $http) {

  var getReadStatus = function(emails) {
    $scope.emails=emails;
    for(var i = 0; i < emails.length; i++) {
      $http.get('http://local.app.com:8080/imap/syncAPI?emailsId=' + emails[i].EmailsID + '&mailbox=inbox', {withCredentials: true}).success(function(unreadD) {
        $scope.emails[i].Unread = unreadD;
      });
    }
  }

  $http.get('http://local.app.com:8080/emailsAPI', {withCredentials:true}).success(function(data) {
    getReadStatus(data);
  });
}

The getReadStatus function here will assign all of the emails recieved from the first API call to the same variable as before ($scope.emails) it will then cycle through each email object, and use the EmailsID property to call the second API. Finally it will add a property called Unread to each email object allowing it to be accessed correctly from the template.

edited Jul 25, 2014 at 23:40

answered Jul 25, 2014 at 23:20

Andy

1731 silver badge6 bronze badges

3 Comments

hey Over a year ago

it says Uncaught SyntaxError: Unexpected identifier on line 11 ( mine ) `` for(int i = 0; i < emails.length; i++) {``

Andy Over a year ago

whoops, I was stuck in java land, I've edited to use var instead of int. Try that.

hey Over a year ago

ReferenceError: getReadStatus is not defined

Collectives™ on Stack Overflow

How to bind two variables in a template ( angularjs)

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related