AngularJS - Nested ng-repeat using two objects

Question

Controller:

$scope.init = function(team){
    $http.get("/getLeaderByTeamID/"+team.id)
    .success(function (data, status, headers, config) {
        // this is the object that I need to list in the table
        $scope.leader = data;
    })
    .error(function (data, status, header, config) {
        $log.error("Error!");
    });

}

The data-ng-repeat directives in the table:

<table>
<thead>
    <tr>
        <th>Team</th>
        <th>Leader</th>
    </tr>
</thead>
<tbody>
     <tr data-ng-repeat="team in teams" data-ng-init="init(team)">
        <td>{{team.name}}</td>
        <td data-ng-repeat="l in leader">{{l.name}}</td>
     </tr>
</tbody>

The logic is as follow:

When every team is listed the init() function will send the object to the controller.
In the other side the init() function will make a query with the ID team in order to get its respective leader.
The function will return one object and the second ng-repeat directive will list this into its respective team object.

But as I showed the list is wrong because one same object is listed in every team.

I was thinking create an array into the init() function with every object but I don't know how to concatenate every object in order to create an array.

Any suggestions?

Is there any way to get the data in the proper form from your db? — John Halbert
– John Halbert, Commented Jul 1, 2016 at 22:02
The relationship cannot be modified but as I said before... Can be possible create an array with every object into the init() function? — wilson
– wilson, Commented Jul 1, 2016 at 22:25

Slaiman Aris · Accepted Answer · 2016-07-01 23:21:07Z

3

I think you'r just updating $scope.leader value in every request ,so at the end $scope.leader will have the same value for all teams. try this.

$scope.init = function(teamId){
$http.get("/getLeaderByTeamID/"+teamId)
.success(function (data, status, headers, config) {
    // this is the object that I need to list in the table
    $scope.leader[teamId] = data;
})
.error(function (data, status, header, config) {
    $log.error("Error!");
});



<table>
<thead>
    <tr>
        <th>Team</th>
        <th>Leader</th>
    </tr>
</thead>
<tbody>
     <tr data-ng-repeat="team in teams" data-ng-init="init(team.id)">
        <td>{{team.name}}</td>
        <td data-ng-repeat="l in leader[team.id]">{{l.name}}</td>
     </tr>
</tbody>

or you can use function return leaders array in the second ng-repeat like:

<td data-ng-repeat="l in getLeader(team.id)">{{l.name}}</td>

edited Jul 1, 2016 at 23:21

answered Jul 1, 2016 at 22:50

Slaiman Aris

1113 silver badges9 bronze badges

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

4 Comments

John Halbert Over a year ago

Yeah, definitely my first thought. But if there's a relationship in the database, whether it was set up as a foreign/primary key or not, you can always join on those columns. Seems like if you're using SQL you can definitely get this back properly from the DB.

Slaiman Aris Over a year ago

I prefer to get all data from the first Initial request if he can ,then use ng-repeat on the complete data

wilson Over a year ago

@SlaimanAris Looks good but I have an error "Cannot read property 'id' of undefined" in the $http service. Seems the "team.id" parameter is wrong.

Slaiman Aris Over a year ago

sorry my problem you dont need (key,value) in ng-repeat just updated my answer to use team.id

Collectives™ on Stack Overflow

AngularJS - Nested ng-repeat using two objects

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related