Manage For loop in angular?

Question

I'm an angular newbie and I'm trying to loop through each object in an array to create a user row for each in a new array, see scenario below

In example below I only want to get to_user_id to create new row for each

[{id: 1, to_user_id: 5, from_user_id: 4},
{id: 2, to_user_id: 6, from_user_id: 4}]

Below is my service I know i have to wrap it in a for loop and push objects to a new array, I just don't know how to express it in angular

UserService.GetUserById(to_user_id)
        .success(function (data) {

          }).
        error(function(error, status) {
          alert(status);
          console.log(error);         
      });
    });

are you populating your array by calling the GetUserById multiple times ? — svarog
– svarog, Commented Jun 24, 2015 at 6:35
and you want to show it on your html? you should GET all users because if you don't know how many your DB holds, you won't know how many times you should iterate the loop — svarog
– svarog, Commented Jun 24, 2015 at 6:36
@svarog I have control over how many is returned in the array i want to loop through... so basically i will ng-repeat through new array.. the backend developer didn't want to return a to_user_name in the first array.. reason i have to get each to_user's row by id — teddybear123
– teddybear123, Commented Jun 24, 2015 at 6:41

devqon · Accepted Answer · 2015-06-24 06:55:10Z

1

Your returned data is an array, so you can just loop over it:

$scope.users = [];

myService.getData().then(function(data){
    angular.forEach(data, function(user){
        getUser(user.to_user_id);
    });
});

function getUser(id) {
    UserService.GetUserById(id)
        .success(function (data) {
            $scope.users.push(data);
        }).error(function(error, status) {
            alert(status);
            console.log(error);         
        });
    });
}

And then iterate over the users in your scope:

<ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
</ul>

answered Jun 24, 2015 at 6:55

devqon

14k2 gold badges32 silver badges46 bronze badges

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

Comments

tapos ghosh · Accepted Answer · 2015-06-24 06:36:28Z

1

use anuglar foreach loog example:

    $scope.newvalues = []; 
    angular.forEach(values, function(value) {
$scope.newvalues.push(values.to_user_id)
};

answered Jun 24, 2015 at 6:36

tapos ghosh

2,22226 silver badges38 bronze badges

Comments

svarog · Accepted Answer · 2015-06-24 06:48:57Z

1

run your service as many times as you need. use the array .push() method to push new users into your array. then use ng-repeat in your html to display them, like so (using an IIFE closure))

$scope.users = [];

for (var =i; i<maxValues; i++) {
    (function call(i)
    UserService.GetUserById(to_user_id)
        .success(function(data) {
            $scope.users.push(data);
    }))(i); 
}

with a IIFE closure you can run your async http call in a loop without losing the i when promise returns to .success()

in html (you can use a table instead of a list)

<ol>
    <li ng-repeat="user in users">{{user.to_user_id}}</li>
</ol>

edited Jun 24, 2015 at 6:48

answered Jun 24, 2015 at 6:42

svarog

9,8755 gold badges66 silver badges79 bronze badges

1 Comment

teddybear123 Over a year ago

yeah i get the part where i have to run my service x number of times i just don't know how to wrap it in a loop statement

dfsq · Accepted Answer · 2015-06-24 06:59:34Z

Well while it's not very good idea to run multiple requests to the server in loop, you can make it convenient by using promises to control the state of all requests.

Consider this example of how you can augment original array of users with additional to_user property retrieved from the service call:

$scope.users = [
    {id: 1, to_user_id: 5, from_user_id: 4},
    {id: 2, to_user_id: 6, from_user_id: 4}
];

$q.all($scope.users.map(function(user) {
    return UserService.GetUserById(user.to_user_id).success(function(data) {
        user.to_user = data;
    });
}))
.then(function() {
    // all users are resolved successfully
})
.catch(function (error, status) {
    // at least one request failed
    alert(status);
    console.log(error);
});

Demo: http://plnkr.co/edit/yLBTCSfcDhVL0ysCW3B6?p=preview

Collectives™ on Stack Overflow

Manage For loop in angular?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related