Using foreign key in ng-repeat - angularjs

Question

I have two tables:
A jobs table with 3 fields: id, client_id, name.
A clients table with 2 fields: id, name.
Using Angular 1.5, I'm iterating over the jobs:
controller('JobsController', ['$scope', 'Job', 'Client', function($scope, Job, Client) {
$scope.jobs = Job.query();
$scope.clients = Client.query();
}]);
HTML:
<tr ng-repeat="job in jobs">
<td>
{{clients[job.client_id].name}}
</td>
<td>
{{job.name}}
</td>
</tr>
In the HTML the first column should be the client name. As it is, this isn't working, because $scope.clients is an array of objects that look a bit like this:
[{'id':4, 'name':'test_name'}, {'id':7, 'name':'another client'}]
Is there a way to pick from this clients array by id, in my ng-repeat loop?
$scope.jobs looks like:
[{'id':100, 'client_id': 4, 'name': 'a job'}, ...]

Answer 1

To begin with, it may be easier to do the join on the server side, to where your $scope.jobs would look more like:
[
{
'id': 100,
'name': 'a job',
'client': {
'id': 4
'name': 'test_name'
}
}
...
]
If you need to do it on the front end, what I would do is add a method to your controller to get the client for a specified job. Something like this:
$scope.getClientName = function(job) {
//to prevent errors if $scope.clients is not loaded yet
if (!$scope.clients) {
return;
}
for (var c = 0; c < $scope.clients.length; c++) {
var client = $scope.clients[c];
if (client.id = job.client_id) {
return client.name;
}
}
}
Then instead of {{clients[job.client_id].name}} call your function and pass in the job:
{{getClientName(job)}}

Answer 2

You can do it in front end as below
$scope.clients = [{'id':1, 'name':'test_name'}, {'id':4, 'name':'another client'}];
$scope.jobs = [{'id':100, 'client_id': 4, 'name': 'a job4'}, {'id':100, 'client_id': 1, 'name': 'a job1'}, {'id':100, 'client_id': 24, 'name': 'a job24'}];
function fillJobsByClient(jobs, client){
for(var i=0; i<jobs.length; i++){
if(jobs[i].client_id == client.id){
jobs[i].client = client;
delete jobs[i].client_id;
}
}
}
$scope.clients.forEach(function(client){
fillJobsByClient($scope.jobs, client);
});
console.log($scope.jobs);

Answer 3

I know this is late, but I figured it might help point someone else on the right direction. This is how you could do it on the front end, you should load your array OnInit, then use an if statement to select the correct detail field.
<tr *ngFor='let j of jobs'>
<td>
<div *ngFor='let c of clients'>
<div *ngIf='c.id== j.client_id'>{{j.name}}</div>
</div>
</td>
</tr>