Table with dynamic columns

Asked

Viewed 191 times

0

I am facing problems in generating an HTML table through a return in Json, the problem is in generating the amount of columns dynamically as AIP returns.

The return is presented in the following structure:

geraTabela = [{"DiaLeitura":"2/8","Dados":[{"HoraLeitura":"0:10","Valorleitura":"1673"},{"HoraLeitura":"0:20","Valorleitura":"1673"},{"HoraLeitura":"0:30","Valorleitura":"1673"},{"HoraLeitura":"0:40","Valorleitura":"1673"},{"HoraLeitura":"0:50","Valorleitura":"1673"},{"HoraLeitura":"1:0","Valorleitura":"1673"},{"HoraLeitura":"1:10","Valorleitura":"1673"},{"HoraLeitura":"1:20","Valorleitura":"1673"},{"HoraLeitura":"1:30","Valorleitura":"1673"},{"HoraLeitura":"1:40","Valorleitura":"10"},{"HoraLeitura":"1:50","Valorleitura":"861"},{"HoraLeitura":"2:0","Valorleitura":"1785.25"},{"HoraLeitura":"2:10","Valorleitura":"1839.75"},{"HoraLeitura":"2:20","Valorleitura":"1867"},{"HoraLeitura":"2:30","Valorleitura":"1867"},{"HoraLeitura":"2:40","Valorleitura":"1797"},{"HoraLeitura":"2:50","Valorleitura":"1782"},{"HoraLeitura":"3:0","Valorleitura":"1842"},{"HoraLeitura":"3:10","Valorleitura":"1842"},{"HoraLeitura":"3:20","Valorleitura":"1842"},{"HoraLeitura":"3:30","Valorleitura":"1842"},{"HoraLeitura":"3:40","Valorleitura":"1842"},{"HoraLeitura":"3:50","Valorleitura":"1842"},{"HoraLeitura":"4:0","Valorleitura":"1842"},{"HoraLeitura":"4:10","Valorleitura":"1842"},{"HoraLeitura":"4:20","Valorleitura":"1842"},{"HoraLeitura":"4:30","Valorleitura":"1842"},{"HoraLeitura":"4:40","Valorleitura":"1842"},{"HoraLeitura":"4:50","Valorleitura":"1842"},{"HoraLeitura":"5:0","Valorleitura":"1842"},{"HoraLeitura":"5:10","Valorleitura":"1842"},{"HoraLeitura":"5:20","Valorleitura":"1842"},{"HoraLeitura":"5:30","Valorleitura":"1842"},{"HoraLeitura":"5:40","Valorleitura":"1842"},{"HoraLeitura":"5:50","Valorleitura":"1842"},{"HoraLeitura":"6:0","Valorleitura":"1842"},{"HoraLeitura":"6:10","Valorleitura":"1842"},{"HoraLeitura":"6:20","Valorleitura":"1842"},{"HoraLeitura":"6:30","Valorleitura":"1842"},{"HoraLeitura":"6:40","Valorleitura":"1842"},{"HoraLeitura":"6:50","Valorleitura":"1842"},{"HoraLeitura":"7:0","Valorleitura":"1842"},{"HoraLeitura":"7:10","Valorleitura":"1842"},{"HoraLeitura":"7:20","Valorleitura":"1576"},{"HoraLeitura":"7:30","Valorleitura":"1576"},{"HoraLeitura":"7:40","Valorleitura":"1576"},{"HoraLeitura":"7:50","Valorleitura":"1576"},{"HoraLeitura":"8:0","Valorleitura":"1576"},{"HoraLeitura":"8:10","Valorleitura":"1576"},{"HoraLeitura":"8:20","Valorleitura":"1576"},{"HoraLeitura":"8:30","Valorleitura":"1576"},{"HoraLeitura":"8:40","Valorleitura":"1576"},{"HoraLeitura":"8:50","Valorleitura":"1709"},{"HoraLeitura":"9:0","Valorleitura":"1709"},{"HoraLeitura":"9:10","Valorleitura":"1709"},{"HoraLeitura":"9:20","Valorleitura":"1709"},{"HoraLeitura":"9:30","Valorleitura":"1709"},{"HoraLeitura":"9:40","Valorleitura":"1709"},{"HoraLeitura":"9:50","Valorleitura":"1709"},{"HoraLeitura":"10:0","Valorleitura":"1709"},{"HoraLeitura":"10:10","Valorleitura":"1709"},{"HoraLeitura":"10:20","Valorleitura":"1709"},{"HoraLeitura":"10:30","Valorleitura":"1600"},{"HoraLeitura":"10:40","Valorleitura":"1600"},{"HoraLeitura":"10:50","Valorleitura":"1600"},{"HoraLeitura":"11:0","Valorleitura":"1600"},{"HoraLeitura":"11:10","Valorleitura":"1600"},{"HoraLeitura":"11:20","Valorleitura":"1600"},{"HoraLeitura":"11:30","Valorleitura":"1600"},{"HoraLeitura":"11:40","Valorleitura":"1600"},{"HoraLeitura":"11:50","Valorleitura":"1600"},{"HoraLeitura":"12:0","Valorleitura":"1600"},{"HoraLeitura":"12:10","Valorleitura":"1600"},{"HoraLeitura":"12:20","Valorleitura":"1600"},{"HoraLeitura":"12:30","Valorleitura":"1539"},{"HoraLeitura":"12:40","Valorleitura":"1539"},{"HoraLeitura":"12:50","Valorleitura":"1539"},{"HoraLeitura":"13:0","Valorleitura":"1539"},{"HoraLeitura":"13:10","Valorleitura":"1539"},{"HoraLeitura":"13:20","Valorleitura":"1539"},{"HoraLeitura":"13:30","Valorleitura":"1539"},{"HoraLeitura":"13:40","Valorleitura":"1539"},{"HoraLeitura":"13:50","Valorleitura":"1539"},{"HoraLeitura":"14:0","Valorleitura":"1539"},{"HoraLeitura":"14:10","Valorleitura":"1539"},{"HoraLeitura":"14:20","Valorleitura":"1539"},{"HoraLeitura":"14:30","Valorleitura":"1539"},{"HoraLeitura":"14:40","Valorleitura":"1539"},{"HoraLeitura":"14:50","Valorleitura":"1539"},{"HoraLeitura":"15:0","Valorleitura":"1539"},{"HoraLeitura":"15:10","Valorleitura":"1539"},{"HoraLeitura":"15:20","Valorleitura":"1539"},{"HoraLeitura":"15:30","Valorleitura":"1539"},{"HoraLeitura":"15:40","Valorleitura":"1539"},{"HoraLeitura":"15:50","Valorleitura":"1539"},{"HoraLeitura":"16:0","Valorleitura":"1539"},{"HoraLeitura":"16:10","Valorleitura":"1539"},{"HoraLeitura":"16:20","Valorleitura":"1200"},{"HoraLeitura":"16:30","Valorleitura":"1200"},{"HoraLeitura":"16:40","Valorleitura":"1200"},{"HoraLeitura":"16:50","Valorleitura":"1500"},{"HoraLeitura":"17:0","Valorleitura":"1500"},{"HoraLeitura":"17:10","Valorleitura":"1500"},{"HoraLeitura":"17:20","Valorleitura":"1212"},{"HoraLeitura":"17:30","Valorleitura":"1070.666626"},{"HoraLeitura":"17:40","Valorleitura":"625"},{"HoraLeitura":"17:50","Valorleitura":"500"},{"HoraLeitura":"18:0","Valorleitura":"250"},{"HoraLeitura":"18:10","Valorleitura":"250"},{"HoraLeitura":"18:20","Valorleitura":"250"},{"HoraLeitura":"18:30","Valorleitura":"250"},{"HoraLeitura":"18:40","Valorleitura":"250"},{"HoraLeitura":"18:50","Valorleitura":"250"},{"HoraLeitura":"19:0","Valorleitura":"250"},{"HoraLeitura":"19:10","Valorleitura":"250"},{"HoraLeitura":"19:20","Valorleitura":"250"},{"HoraLeitura":"19:30","Valorleitura":"250"},{"HoraLeitura":"19:40","Valorleitura":"250"},{"HoraLeitura":"19:50","Valorleitura":"250"},{"HoraLeitura":"20:0","Valorleitura":"250"},{"HoraLeitura":"20:10","Valorleitura":"250"},{"HoraLeitura":"20:20","Valorleitura":"250"},{"HoraLeitura":"20:30","Valorleitura":"250"},{"HoraLeitura":"20:40","Valorleitura":"250"},{"HoraLeitura":"20:50","Valorleitura":"250"},{"HoraLeitura":"21:0","Valorleitura":"250"},{"HoraLeitura":"21:10","Valorleitura":"1576"},{"HoraLeitura":"21:20","Valorleitura":"1600"},{"HoraLeitura":"21:30","Valorleitura":"1612"},{"HoraLeitura":"21:40","Valorleitura":"1612"},{"HoraLeitura":"21:50","Valorleitura":"1612"},{"HoraLeitura":"22:0","Valorleitura":"1612"},{"HoraLeitura":"22:10","Valorleitura":"1612"},{"HoraLeitura":"22:20","Valorleitura":"1612"},{"HoraLeitura":"22:30","Valorleitura":"1612"},{"HoraLeitura":"22:40","Valorleitura":"1612"},{"HoraLeitura":"22:50","Valorleitura":"1612"},{"HoraLeitura":"23:0","Valorleitura":"1612"},{"HoraLeitura":"23:10","Valorleitura":"1612"},{"HoraLeitura":"23:20","Valorleitura":"1612"},{"HoraLeitura":"23:30","Valorleitura":"1612"},{"HoraLeitura":"23:40","Valorleitura":"1612"},{"HoraLeitura":"23:50","Valorleitura":"1612"}]},{"DiaLeitura":"3/8","Dados":[{"HoraLeitura":"0:0","Valorleitura":"1612"},{"HoraLeitura":"0:10","Valorleitura":"1612"},{"HoraLeitura":"0:20","Valorleitura":"1612"},{"HoraLeitura":"0:30","Valorleitura":"1612"},{"HoraLeitura":"0:40","Valorleitura":"1612"},{"HoraLeitura":"0:50","Valorleitura":"1612"},{"HoraLeitura":"1:0","Valorleitura":"1612"},{"HoraLeitura":"1:10","Valorleitura":"1612"},{"HoraLeitura":"1:20","Valorleitura":"1612"},{"HoraLeitura":"1:30","Valorleitura":"1612"},{"HoraLeitura":"1:40","Valorleitura":"1612"},{"HoraLeitura":"1:50","Valorleitura":"1612"},{"HoraLeitura":"2:0","Valorleitura":"1612"},{"HoraLeitura":"2:10","Valorleitura":"1612"},{"HoraLeitura":"2:20","Valorleitura":"1612"},{"HoraLeitura":"2:30","Valorleitura":"1612"},{"HoraLeitura":"2:40","Valorleitura":"1612"},{"HoraLeitura":"2:50","Valorleitura":"1612"},{"HoraLeitura":"3:0","Valorleitura":"1612"},{"HoraLeitura":"3:10","Valorleitura":"1612"},{"HoraLeitura":"3:20","Valorleitura":"1612"},{"HoraLeitura":"3:30","Valorleitura":"1652"},{"HoraLeitura":"3:40","Valorleitura":"1652"},{"HoraLeitura":"3:50","Valorleitura":"1652"},{"HoraLeitura":"4:0","Valorleitura":"1652"},{"HoraLeitura":"4:10","Valorleitura":"1652"},{"HoraLeitura":"4:20","Valorleitura":"1652"},{"HoraLeitura":"4:30","Valorleitura":"1652"},{"HoraLeitura":"4:40","Valorleitura":"1652"},{"HoraLeitura":"4:50","Valorleitura":"1652"},{"HoraLeitura":"5:0","Valorleitura":"1652"},{"HoraLeitura":"5:10","Valorleitura":"1652"},{"HoraLeitura":"5:20","Valorleitura":"1652"},{"HoraLeitura":"5:30","Valorleitura":"1652"},{"HoraLeitura":"5:40","Valorleitura":"70"},{"HoraLeitura":"5:50","Valorleitura":"54.5"},{"HoraLeitura":"6:0","Valorleitura":"1248"},{"HoraLeitura":"6:10","Valorleitura":"5"},{"HoraLeitura":"6:20","Valorleitura":"1636"},{"HoraLeitura":"6:30","Valorleitura":"1394"},{"HoraLeitura":"6:40","Valorleitura":"1475"},{"HoraLeitura":"6:50","Valorleitura":"1515"},{"HoraLeitura":"7:0","Valorleitura":"600"},{"HoraLeitura":"7:10","Valorleitura":"600"},{"HoraLeitura":"7:20","Valorleitura":"600"},{"HoraLeitura":"7:30","Valorleitura":"1465"},{"HoraLeitura":"7:40","Valorleitura":"1300"},{"HoraLeitura":"7:50","Valorleitura":"1482.5"},{"HoraLeitura":"8:0","Valorleitura":"1447.5"},{"HoraLeitura":"8:10","Valorleitura":"1430"},{"HoraLeitura":"8:20","Valorleitura":"1430"},{"HoraLeitura":"8:30","Valorleitura":"1500"},{"HoraLeitura":"8:40","Valorleitura":"1500"},{"HoraLeitura":"8:50","Valorleitura":"1500"},{"HoraLeitura":"9:0","Valorleitura":"1500"},{"HoraLeitura":"9:10","Valorleitura":"1535"},{"HoraLeitura":"9:20","Valorleitura":"1476.666626"},{"HoraLeitura":"9:30","Valorleitura":"1430"},{"HoraLeitura":"9:40","Valorleitura":"1476.666626"},{"HoraLeitura":"9:50","Valorleitura":"1500"},{"HoraLeitura":"10:0","Valorleitura":"1500"},{"HoraLeitura":"10:10","Valorleitura":"1500"},{"HoraLeitura":"10:20","Valorleitura":"1500"},{"HoraLeitura":"10:30","Valorleitura":"1600"},{"HoraLeitura":"10:40","Valorleitura":"1600"},{"HoraLeitura":"10:50","Valorleitura":"1600"},{"HoraLeitura":"11:0","Valorleitura":"1600"},{"HoraLeitura":"11:10","Valorleitura":"1600"},{"HoraLeitura":"11:20","Valorleitura":"1600"},{"HoraLeitura":"11:30","Valorleitura":"1600"},{"HoraLeitura":"11:40","Valorleitura":"1600"},{"HoraLeitura":"11:50","Valorleitura":"1600"},{"HoraLeitura":"12:0","Valorleitura":"1600"},{"HoraLeitura":"12:10","Valorleitura":"1600"},{"HoraLeitura":"12:20","Valorleitura":"1600"},{"HoraLeitura":"12:30","Valorleitura":"1465"},{"HoraLeitura":"12:40","Valorleitura":"1500"},{"HoraLeitura":"12:50","Valorleitura":"1500"},{"HoraLeitura":"13:0","Valorleitura":"1500"},{"HoraLeitura":"13:10","Valorleitura":"1500"},{"HoraLeitura":"13:20","Valorleitura":"1500"},{"HoraLeitura":"13:30","Valorleitura":"1500"},{"HoraLeitura":"13:40","Valorleitura":"1500"},{"HoraLeitura":"13:50","Valorleitura":"1500"},{"HoraLeitura":"14:0","Valorleitura":"1500"},{"HoraLeitura":"14:10","Valorleitura":"1500"},{"HoraLeitura":"14:20","Valorleitura":"1430"},{"HoraLeitura":"14:30","Valorleitura":"1430"},{"HoraLeitura":"14:40","Valorleitura":"1430"},{"HoraLeitura":"14:50","Valorleitura":"1430"},{"HoraLeitura":"15:0","Valorleitura":"1430"},{"HoraLeitura":"15:10","Valorleitura":"1430"},{"HoraLeitura":"15:20","Valorleitura":"1430"},{"HoraLeitura":"15:30","Valorleitura":"1430"},{"HoraLeitura":"15:40","Valorleitura":"1430"},{"HoraLeitura":"15:50","Valorleitura":"1430"},{"HoraLeitura":"16:0","Valorleitura":"1430"},{"HoraLeitura":"16:10","Valorleitura":"1430"},{"HoraLeitura":"16:20","Valorleitura":"1430"},{"HoraLeitura":"16:30","Valorleitura":"1430"},{"HoraLeitura":"16:40","Valorleitura":"1430"},{"HoraLeitura":"16:50","Valorleitura":"1430"},{"HoraLeitura":"17:0","Valorleitura":"1430"},{"HoraLeitura":"17:10","Valorleitura":"1430"},{"HoraLeitura":"17:20","Valorleitura":"500"},{"HoraLeitura":"17:30","Valorleitura":"500"},{"HoraLeitura":"17:40","Valorleitura":"500"},{"HoraLeitura":"17:50","Valorleitura":"1261"},{"HoraLeitura":"18:0","Valorleitura":"200"},{"HoraLeitura":"18:10","Valorleitura":"200"},{"HoraLeitura":"18:20","Valorleitura":"200"},{"HoraLeitura":"18:30","Valorleitura":"200"},{"HoraLeitura":"18:40","Valorleitura":"210"},{"HoraLeitura":"18:50","Valorleitura":"210"},{"HoraLeitura":"19:0","Valorleitura":"210"},{"HoraLeitura":"19:10","Valorleitura":"210"},{"HoraLeitura":"19:20","Valorleitura":"210"},{"HoraLeitura":"19:30","Valorleitura":"210"},{"HoraLeitura":"19:40","Valorleitura":"210"},{"HoraLeitura":"19:50","Valorleitura":"210"},{"HoraLeitura":"20:0","Valorleitura":"210"},{"HoraLeitura":"20:10","Valorleitura":"210"},{"HoraLeitura":"20:20","Valorleitura":"210"},{"HoraLeitura":"20:30","Valorleitura":"210"},{"HoraLeitura":"20:40","Valorleitura":"210"},{"HoraLeitura":"20:50","Valorleitura":"210"},{"HoraLeitura":"21:0","Valorleitura":"210"},{"HoraLeitura":"21:10","Valorleitura":"700"},{"HoraLeitura":"21:20","Valorleitura":"1200"},{"HoraLeitura":"21:30","Valorleitura":"1400"},{"HoraLeitura":"21:40","Valorleitura":"1400"},{"HoraLeitura":"21:50","Valorleitura":"1400"},{"HoraLeitura":"22:0","Valorleitura":"1400"},{"HoraLeitura":"22:10","Valorleitura":"1400"},{"HoraLeitura":"22:20","Valorleitura":"1400"},{"HoraLeitura":"22:30","Valorleitura":"1400"},{"HoraLeitura":"22:40","Valorleitura":"1400"},{"HoraLeitura":"22:50","Valorleitura":"1400"},{"HoraLeitura":"23:0","Valorleitura":"1400"},{"HoraLeitura":"23:10","Valorleitura":"1400"},{"HoraLeitura":"23:20","Valorleitura":"1400"},{"HoraLeitura":"23:30","Valorleitura":"1400"},{"HoraLeitura":"23:40","Valorleitura":"1400"},{"HoraLeitura":"23:50","Valorleitura":"1400"}]}]

I am using ngFor as below:

<table>
    <thead>
      <tr>
        <th *ngFor="let tit of geraTabela" colspan="2">{{tit.DiaLeitura}}</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let dados of geraTabela; let i = index">
        <tr *ngFor="let obj of geraTabela[i].Dados">
          <ng-container *ngFor="let tit of geraTabela">
            <td>
              {{obj.HoraLeitura}}
            </td>
            <td>
              {{obj.Valorleitura}}
            </td>
          </ng-container>
        </tr>
      </ng-container>
    </tbody>
  </table>

The number of rows is normally generated, but the records of each index are repeated for all columns, only after the row is broken.

As any beginner, I’m getting enough to implement the code and can no longer see the error. Someone could give a suggestion?

angular

  • in this line "<ng-container *ngFor="Let tit of geraTable">" you are repeating the loop of the first object/array which is the "geraTable".

2 answers

1


The way json is structured you won’t be able to directly get the expected result, however with DOM (CSS) manipulation you can get there.

Without much attention with layout, your example fixed and working, with the help of Styles:

<style>
.grid {
    width: 288px;
    display: inline-flex;
}    
thead {
    display: block;
}
table, th, td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}
th {
    width: 144px;
    height: 50px;
}
</style>
<table>
    <thead>
        <tr>
            <th *ngFor="let tit of geraTabela" colspan="2">{{tit.DiaLeitura}}</th>
        </tr>
    </thead>
    <div class="grid">
        <tbody *ngFor="let dados of geraTabela; let i = index">
            <tr *ngFor="let obj of geraTabela[i].Dados">
                <td>
                    {{obj.HoraLeitura}}
                </td>
                <td>
                    {{obj.Valorleitura}}
                </td>
            </tr>
        </tbody>
    </div>
</table>

  • It worked, thank you very much!!!

1

Posting the solution found with Ernesto’s support.

<style>
.grid {
    width: 288px;
    display: inline-flex;
}    
thead {
    display: block;
}
table, th, td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}
th {
    width: 144px;
    height: 50px;
}
</style>

<table>
    <div class="grid">
        <tbody *ngFor="let dados of geraTabela; let i = index">
            <tr>
                <td colspan="2">
                    {{dados.DiaLeitura}}
                </td>
            </tr>
            <tr *ngFor="let obj of geraTabela[i].Dados">
                <td>
                    {{obj.HoraLeitura}}
                </td>
                <td>
                    {{obj.Valorleitura}}
                </td>
            </tr>
        </tbody>
    </div>
</table>

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.