I'm attempting to build a dynamic datagrid in angular2 using a JSON object as the source. The challenge I face is not knowing the structure of the columns within the table, making it difficult to render the rows properly.
My understanding is that I need to define the row structure in order to render the cells, but without knowledge of the column names, this becomes problematic.
Let me illustrate with examples...
Below are two JSON examples that need to be displayed in the same table:
Example 1
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
}
]
},
"rows": {
"row": [
{
"column1": "articleCode",
"column2": "Avg"
},
{
"column1": "151110103",
"column2": "100"
},
{
"column1": "151110109",
"column2": "101"
},
{
"column1": "151110111",
"column2": "102"
},
{
"column1": "151110117",
"column2": "103"
}
]
}
}
}
Example 2
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
},
{
"-averageDemand": "Article.averageDemand",
"-label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"-label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100",
"column3": "500",
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101",
"column3": "46",
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102",
"column3": "16",
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103",
"column3": "112",
"column4": "SEL"
}
]
}
}
}
Components used...
The Table Component:
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<tbody>
<app-field-mapping-row [rowData]="row" *ngFor="let row of rows"></app-field-mapping-row>
</tbody>
</table>
app-field-mapping-row component:
I am stuck at this point!
<tr>
<td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" >
{{cell}}
</td>
</tr>
How can I dynamically create the cells and iterate through the row's children which have different names each time... If all children were named 'cell', I could use an array, but since they vary, I don't know how to loop through them.
I have yet to discover a method to convert the 'children' of a JSON node into an array...
eg. *ngFor="let cell of rowData.children()"
Your assistance is always appreciated.