CODEWITHSUNDEEP
angularjs
Sean
Sean

Reputation: 1364

How to pass variables from an array to ng-repeat

Problem: I have a list of data that has an ID in each record which I use to make an API call to get more info about this particular item. Problem is - ng-repeat already is looping through my data. How do I pass a different API call's response for each ng-repeat action?

Code:

View:

<div ng-repeat="activity in userActivity">
    <div class="row">
        <div class="col-md-10 col-md-offset-2">
            <a href="#">{[ user.fullname ]}</a> has {[ activity.action ]} to: <a href="#"> {[ post.post ]}<br>
        </div>
    </div>

Angular Controller:

profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$scope.user = [];
$scope.userActivity = [];
$scope.post = [];

$http.get('/api/user', {params: { id: $routeParams.id }})
    .success(function(res){
        $scope.user = res.user;
        $scope.userActivity = res.user.activity;

        $http.get('/api/post', {params: { postID: $scope.userActivity[0].post }})
            .success(function(res){
                $scope.post = res.post;
        })
            .error(function(data, status){
                console.log(data);
        });

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

The /api/user's activity from the response looks like this:

"activity": [
    {
        "post": "123456781",
        "action": "agreed"
    },
    {
        "post": "123456782",
        "action": "disagreed"
    }
]

So can someone please help and point me to the right direction as to how to get the data populated together with the ng-view? Currently, it is just showing the post.post for 123456781 which makes sense but how do I pass the variables to the ng-repeat for such a case?

Thanks in advance

Upvotes: 0

Views: 661

Answers (2)

Sravan
Sravan

Reputation: 18647

res.user.activity is an array,

so first loop through the $scope.userActivity array an then make an api call for each value in array and then, update the $scope.userActivity array with a new key as post_obj which is the response you will be using in the view.

Then, your controller should be changed to,

profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$scope.user = [];
$scope.userActivity = [];
$scope.post = [];

$http.get('/api/user', {params: { id: $routeParams.id }})
    .success(function(res){
        $scope.user = res.user;
        $scope.userActivity = res.user.activity;

        for(var i=0 ; i < $scope.userActivity.length ; i++)
        {
            $http.get('/api/post', {params: { postID: $scope.userActivity[i].post }})
                .success(function(res){
                    $scope.userActivity[i].post_obj = res.post;
            })
                .error(function(data, status){
                    console.log(data);
            });
        }



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

Then, your view should change to,

<div ng-repeat="activity in userActivity">
    <div class="row">
        <div class="col-md-10 col-md-offset-2">
            <a href="#">{{ user.fullname }}</a> has {{ activity.action }} to: <a href="#"> {{ activity.post_obj }}<br>
        </div>
    </div
 </div>

This userActivity array now contain the post_obj which we got in response corresponding to each post

Upvotes: 1

Bills
Bills

Reputation: 798

ng-repeat="activity in userActivity" ng-click="myFunction(activity)"

Create myFunction in controller, which gets only clicked activity.

Upvotes: 1

Related Questions