How do I do reference data in AngularJS? - angularjs

Question

Is it possible in AngularJS, while in a nested ng-repeat, to access data from a third table?
Here's an example... let's say I want to create a table which lists actors and actresses in the first row, and then the first column would list movies. In the cells where actor and movie intersect, we might display a rating for how well that actor performed in that film. However, since only a few actors may appear in each film, more often than not those intersecting cells would be blank. If we have roughly 120 actors and 600 films, then we're talking about 72,000 possible intersections, although our dataset may only actually have about 5000 entries.
I'm using three JSON files to do this; actors.json, movies.json, and ratings.json. The first two files contain lists of the actors or movies, and extended data for each; ie: year, genre, director, or age, nationality, etc. The last file; ratings.json, contains simply the ID of the movie, the name of the actor (our data doesn't contain IDs for the actors), and the rating.
Setting up my table, in the first row I ng-repeat through the actors file to display my header row, with the names and information about each actor. I skip the first cell, as it's the top of my header column.
Next, I ng-repeat through my movies data, opening a new row for each, and then within each row, I ng-repeat through my actors data again to create the ratings td's themselves.
All of this is working, but this is where I go off the rails. I cannot figure out an efficient way to grab the ratings data easily. I did figure out HOW to make it work, by basically looping through the entire ratings table, and filtering for a match, but I know that can't be the right way to do it.
Here's some sample code:
<table>
<tr>
<td></td>
<td ng-repeat="movie in movies>
<p>{{movie.name}}</p>
<p>{{movie.year}}</p>
</td>
</tr>
<tr ng-repeat="actor in actors>
<td>{{actor.name}}</td>
<td ng-repeat="movie in movies">
<span ng-repeat="rating in ratings | filter: { id: movie.id } : true | filter: { actor: actor.name } : true">
{{rating.rating}}
</span>
</td>
</tr>
</table>
As you can imagine, this method is really (REALLY) slow.
If this were php or something, I'd just grab the data from an array (ie: $rating[$movie_id][$actor_name]), simple as pie, but for the life of me I can't figure out how to do this with AngularJS, not at all. I just want to reference the proper bit of ratings data directly.
As requested, here's a sample of ratings.json.
[
{
actor: "Brad Pitt",
id: "13",
rating: "3"
},
{
actor: "Jennifer Anniston",
id: "8",
rating: "7"
},
...
]
Thanks,
m.

Answer 1

You would need to pre-process your ratings.json array into a nested hash.
var ratings = {};
for (var i=0; i < ratingsArray.length; i++){
var ratingEntry = ratingsArray[i];
var id = ratingEntry.Id, actor = ratingEntry.actor;
rating[id] = rating[id] || {};
rating[id][actor] = ratingEntry.rating;
}
Then you could just do exactly what you would expect had it been PHP:
<tr ng-repeat="actor in actors>
<td>{{actor.name}}</td>
<td ng-repeat="movie_id in movies">
{{rating[movie_id][actor]}}
</td>
</tr>