title: how to split array into table
body: <p>I have this arrays from my JSON file</p>
  <pre><code>&quot;Works&quot;: [
  {&quot;TypeOfWork&quot;: &quot;scaffolding&quot;, &quot;Status&quot;: &quot;done&quot;},
  {&quot;TypeOfWork&quot;: &quot;painting&quot;, &quot;Status&quot;: &quot;on-going&quot;}
  ]
  </code></pre>
  <p>I want to show a table like this</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>Works</th>
  <th>Status</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>type of work 1</td>
  <td>Status 1</td>
  </tr>
  <tr>
  <td>type of work 2</td>
  <td>Status 2</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>I have tried</p>
  <pre><code>&lt;table ng-repeat = 'projectDetails.Works'&gt;
  &lt;th&gt; Works &lt;/th&gt;
  &lt;th&gt; Status &lt;/th&gt;
  &lt;td&gt; {{Works.TypeOfWorks}}&lt;/td&gt;
  &lt;td&gt; {{Works.Status}}&lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I have also tried this one but in the form of {{projectDetails.Works(TypeOfWork)}} and also {{projectDetails.Works[TypeOfWorks]}}</p>
  <pre><code>&lt;table&gt;
      &lt;th&gt; Works &lt;/th&gt;
      &lt;th&gt; Status &lt;/th&gt;
      &lt;td&gt; {{projectDetails.Works.TypeOfWorks}}&lt;/td&gt;
      &lt;td&gt; {{projectDetails.Works.Status}}&lt;/td&gt;
      &lt;/table&gt;
  </code></pre>
  <p>I'm getting my data from a GET function</p>
  <pre><code>$scope.projectList = [];
  for (var id = 0; id &lt; 20; id++) {
    var targetURL = 'https://happybuildings.sim.vuw.ac.nz/api/sooleandr/project.'+id+'.json';
    $http.get(targetURL).then(
      function successCall(response){
        $scope.projectList.push(response.data);
      }
    );
  }
  
  $scope.showData = function(x){
   $scope.projectDetails = x;
   };
  </code></pre>
  <p>In my HTML I have created buttons from the projectList and did an ng-repeat 'x in projectList'. When these buttons a clicked then it calls the showData() function, which shows the relevant data.</p>