title: how to create a table in Angular2 using json
body: <p>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. </p>
  
  <p>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!</p>
  
  <p>Maybe an example will make things more clear...</p>
  
  <p>Below are two examples of JSON that I will need to render in the same table...</p>
  
  <p>Example 1</p>
  
  <pre><code>{
    "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"
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p>Example 2</p>
  
  <pre><code>{
    "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"
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p>Here are my Components...</p>
  
  <p>The Table:</p>
  
  <pre><code>&lt;table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp"&gt;
      &lt;tbody&gt;             
          &lt;app-field-mapping-row [rowData]="row"  *ngFor="let row of rows"&gt;&lt;/app-field-mapping-row&gt;
      &lt;/tbody&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p>app-field-mapping-row:</p>
  
  <p>NOTE This is where I get stuck!</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" &gt;
      {{cell}}
   &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>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.  </p>
  
  <p>I haven't been able to find any method to turn the 'children' of a JSON node into and array...  </p>
  
  <p>eg. *ngFor="let cell of rowData.children()" </p>
  
  <p>Help as always is greatly appreciated.</p>