How to represent a 2D data into a table - angularjs

Question

I have data which is represented as column names, row names and values for a row/column pair. It looks like this:
cols = ['A', 'B', 'C', 'D'];
rows = ['1', '2', '3', '4'];
data = [
{row: '1', col:'A', value: 'a'},
{row: '2', col:'C', value: 'b'},
{row: '3', col:'B', value: 'c'}
];
How do I make this appear in table like this? I am using Angular 1.4.
A B C D
1 a
2 b
3 c
4
My data size is limited, don't expect it to be more than 50-100 entries in data.

Answer 1

Change your data object to a dictionary:
data = [
{row: '1', col:'A', value: 'a'},
{row: '2', col:'C', value: 'b'},
{row: '3', col:'B', value: 'c'}
];
becomes:
data = {'A1' : 'a', 'C2' : 'b', 'B3' : 'c'}..
then do a double ng-repeat loop:
<div ng-repeat="col in cols">
<div ng-repeat="row in rows">
{{ data[row + col] == null ? " " : data[row + col] }}
disclaimer: this is untested, and my angular syntax may be incorrect, but I hope you get the idea.

Answer 2

Since I was limited to not being able to reformat the data and the actual data was a somewhat more complicated than this I ended up writing a filter. My html looks like this:
<div>
<table>
<tr><td></td>
<td ng-repeat="col in cols">{{ col }}</td>
</tr>
<tr ng-repeat="row is rows">
<td>{{ row }}</td>
<td ng-repeat="col in cols">
<div ng-repeat="obj in data | findRowCol:row:col">
{{ obj.value }}
</div>
</td>
</tr>
</table>
</div>
I borrowed from KayakDave's answer here for my filter.
app.filter('findRowCol', function() {
return function(data, row, col) {
result = [];
data.forEach(function(el) {
if(el.row === row && el.col === col)
result.push(el);
});
return result;
}
});
Since data is not expected to be ordered in any particular way this can have a O(N^3) performance, so not very nice solution.