how to create a table in Angular2 using json

Question

I am trying to create a datagrid - or lets call it a table in angular2 using a JSON object to create it. The problem I have is that I dont know how many columns will be in table nor do I know the names or those columns.

From my current understanding i need to define what a row looks like in order to render the cells, but if I dont know what the columns are called then I cant render the row!

Maybe an example will make things more clear...

Below are two examples of JSON that I will need to render 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"
        }
      ]
    }
  }
}

Here are my Components...

The Table:

<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:

NOTE This is where I get stuck!

<tr>
  <td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" >
    {{cell}}
 </td>
</tr>

How can I create the correct number of cells and how do I loop through the children of the rows when each one is named differently... If all children were called cell then I would have an array to use, but I wont know what they are called.

I haven't been able to find any method to turn the 'children' of a JSON node into and array...

eg. *ngFor="let cell of rowData.children()"

Help as always is greatly appreciated.

Alternatively consider using a component like PrimeNG DataTable. http://www.primefaces.org/primeng/#/datatable — Cagatay Civici, Sep 17 '16 at 22:17

noitse · Answer 1 · 2016-09-13T12:15:28.693

Here is how i have done it in AngularJS, but you will get the point. Your second JSON is missing a lot of comma's

This is my view:

<table class="table table-striped table-hover display" style="cellspacing:0;width:100%">
       <thead>
            <tr>
               <th ng-repeat="columns in tableData.table.columns.column">
                   {{columns.label}}
                </th>
            </tr>
       </thead>

     <tbody >
           <tr ng-repeat="row in tableData.table.rows.row"> 
                <td ng-repeat="(key,val) in row">{{val}}</td> 
           </tr>
    </tbody>
</table>

This is your JSON, with me just removing - in label , and fixing JSON format

{
  "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"
        }
      ]
    }
  }
}

So let me explain, for thead , i am just repeating columns and placing labels, while in rows , i am first repeating ROWS , and then inside repeating columns , by returning val and key.

jsFiddle: http://jsfiddle.net/noitse/Lvc0u55v/9487/

Hi Noitse,Thanks very much for taking the time to answer. I have had a look at your jsFiddle which works nicely. Unfortunately, AngularJS is quite different to Angular2. Angular2 does not have a for in loop and so I can only loop through an array rather than the contents of an object. Whilst the first line is easy enough render (as all data begins with 'row') I wouldn't know how to convert the line {{val}} into valid angular2" syntax — Beaker, Sep 13 '16 at 15:38
If you can provide jsFiddle, so i can have a tackle with it to understand angular2 a bit more. — noitse, Sep 13 '16 at 16:14
OK I have made a plunkr The question is in the file app.component.html https://plnkr.co/edit/ILfjCJHVugMqfpJL7GoI?p=preview — Beaker, Sep 14 '16 at 10:40
Check this post http://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor Either do it like this and have 2 data , or change format of your JSON. I am really not familiar with Angular2 , its kinda wierd they dont let you access key and val directly from your data. — noitse, Sep 14 '16 at 11:37

how to create a table in Angular2 using json

1 Answers1