Angular: Plotting data to table with row/column input

Question

I want to plot data to respective placement of the table. I get a array with data where data should be placed. Like this JSON below:

{
  "Layout": {
    "fields": [
      {
        "row": 0,
        "column": 1,
        "text": "dummy text"
      },
      {
        "row": 3,
        "column": 3,
        "text": "another dummy text"
      },
      {
        "row": 4,
        "column": 1,
        "text": "another dummy text"
      }
    ]
  }
}

From this data I want this kind of generated table (or it can also be divs):

+--+------------+--------------------+--+--+--------------------+
|  | dummy text |                    |  |  |                    |
+--+------------+--------------------+--+--+--------------------+
|  |            |                    |  |  | another dummy text |
+--+------------+--------------------+--+--+--------------------+
|  |            | another dummy text |  |  |                    |
+--+------------+--------------------+--+--+--------------------+

So row 0 will be the first row and column 1 will be second column with data dummy text

How do you create this logic in angular(2 , 4)?

Answer 1

Hello you have to iterate over the number of your fields (tr) then over the maxNumber of your columns (td). You can fill the content using *ngIf. The code could look like:

<table>
       <tr *ngFor="yourObject.Layout.fields;let index=i">
          <td *ngFor="arrayWithMaxColumnNumber  ;let j = index">
             <ng-container *ngIf="j===yourObject.Layout.fields[i].column"> yourObject.Layout.fields[i].text </ng-container>
          </td>
       </tr>
    </table>

In your Component you need to generate an array with length of your max column-number... eg: [1,2,3,4,...n] (if it's not known)