Truth be told, I am at a loss on how to tackle this design challenge.
I have two intricate objects from different sources (simplified):
var header = {
fieldName1: {otherstuff: x},
fieldName2: {otherstuff: y},
fieldName3: {otherstuff: z}
}
var data = [
{
fieldName3: {someData: 1},
fieldName2: {someData: 2},
fieldName4: {someData: 3}
},
{
fieldName2: {someData: 11},
fieldName3: {someData: 22},
fieldName1: {someData: 33}
}
];
My goal is to construct a table with a header row displaying the keys of the first object and rows populated by someData values from the second object.
Naturally, the columns in the table need to match the order of the header rows.
<table>
<tr>
<th ng-repeat="(fieldKey, fieldMeta) in header">{{fieldKey}}: {{fieldMeta.label}}</th>
</tr>
<tr ng-repeat="row in data">
<td ng-repeat="value in row">{{value}}</td>
</tr>
</table>
How should I approach this problem? Should I sort the header and data objects first (as objects or arrays), or can I achieve the same using orderBy in the second ng-repeat?
I anticipate coming up with a solution involving around 100 lines of code spread across multiple utility classes if left on my own for a day or two.
While I don't require pre-written code, guidance from seasoned JavaScript developers would be greatly appreciated.