how to display data in table using handlebarsjs

Question

I am creating my first emberjs project and for template engine I am using handlebarsjs , I am getting data from server using ajax call in this format:

{"data":[{"ownerName":"dubey","houseNo":"s17/261","streetName":"chinchwad","areaName":"thergaon","city":"pune","pinZip":"221003","stateProvince":"maharastra","country":"india","shaded":"yes","lat":null,"lon":null,"rate":"29","status":"open","availibility":"open","contactNo":null,"id":"589704c2a924113eb8841952"},{"ownerName":"dubey","houseNo":"s17/261","streetName":"chinchwad","areaName":"thergaon","city":"pune","pinZip":"221003","stateProvince":"maharastra","country":"india","shaded":"yes","lat":null,"lon":null,"rate":"29","status":"open","availibility":"open","contactNo":null,"id":"58971125df1e11416e91ccc3"}]}

and my template is :

<tbody>
      {{#each data.data}}
    <tr>
      <th>{{data.data.[0].houseNo}}</th>
      <th>{{data.data.[0].houseNo}}</th>
      <th>{{data.data.[0].streetName}}</th>
      <th>{{data.data.[0].areaName}}</th>
      <th>{{data.data.[0].city}}</th>
      <th>{{data.data.[0].pinZip}}</th>
      <th>{{data.data.[0].stateProvince}}</th>
      <th>{{data.data.[0].country}}</th>
      <th>{{data.data.[0].shaded}}</th>
      <th>{{data.data.[0].rate}}</th>
      <th>{{data.data.[0].status}}</th>
      <th>{{data.data.[0].availibility}}</th>
      <th>{{data.data.[0].ownerName}}</th>
      <th>{{data.data.[0].contactNo}}</th>
    </tr>
    {{/each}}
  </tbody>

it is showing only the first data in all the rows, I tried many ways to display all the data but I am not able to display it.

I want to know the handlebars way of doing it.

Answer 1

Your data contains array of object so use each helper. if you want to iterate object then use each-in helper.

{{#each  data.data as |row|}}
 {{each-in row as |key value|}}
<tr>
      <th>{{value}}</th>
</tr>
 {{/each-in}}
{{/each}}