nested loop that should display in a table-CodePudding

I want to create an HTML table and display data for each country (PAYS_LIB).

I want to obtain this result:

<th>COUNTRY:</th>
BELGIUM
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

For now, I have this:

<th>COUNTRY:</th>
BELGIUM
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

I'm not familiar with nested loops...

Here is an idea of the JSON

REGROUPEMENT = [
    {
      TYPEVALUE: 11,
      ASSETCATLABEL: 'Actions individuelles',
      CURRENCY: 'EUR',
      AMOUNT: 1646956.5,
      PERCENTAGE: 79.22,
      ELEMENT: [
        {
          LABEL: 'AB INBEV',
          PAYS_LIB: 'BELGIUM',
          ISINCODE: 'NO0010571698',
        },
        {
          LABEL: 'WWI',
          PAYS_LIB: 'FRENCH',
          ISINCODE: 'AO0010571614',
        },
      ],
    },
  ];

And my code

<div >
    <h2 >HTML Table</h2>

<table *ngFor="let item of REGROUPEMENT">
  <tr>
    <th>TYPE</th>
    <th>PRICE</th>
  </tr>
  <tr >
    <td>{{ item.ASSETCATLABEL }}</td>
    <td>{{ item.AMOUNT }}</td>
  </tr>

  <tr>
    <th colspan="3">COUNTRY</th>
  </tr>
  <tr *ngFor="let elem of item.ELEMENT">
    <td  colspan="3"> {{ elem.PAYS_LIB }} </td>

  </tr>

  <tr>
    <th>LABEL</th>
    <th>ISINCODE</th>
  </tr>

  <tr *ngFor="let elem of item.ELEMENT">
    <td> {{ elem.LABEL}}</td>
    <td> {{ elem.ISINCODE}}</td>
  </tr>

</table>

</div>

I also created a reproduction => https://stackblitz.com/edit/github-z6v4p8?file=src/app/todo/todo.component.ts

CodePudding user response：

I am presuming that your desired result is missing a <th> before French.

Based on this presumption, the usage of an ng-container would solved your problem.

<ng-container *ngFor="let elem of item.ELEMENT">
  <tr >
  <th colspan="3">COUNTRY</th>
</tr>
<tr>
  <td  colspan="3"> {{ elem.PAYS_LIB }} </td>
</tr>

<tr>
  <th>LABEL</th>
  <th>ISINCODE</th>
</tr>

<tr *ngFor="let elem of item.ELEMENT">
  <td> {{ elem.LABEL}}</td>
  <td> {{ elem.ISINCODE}}</td>
</tr>
</ng-container>

Here is a fork of your example.

CodePudding user response：

Bienvenue à Stack Overflow!

I think you just want all the data in a 3-column table?

Just move the references to <td> {{ elem.LABEL}}</td> and {{ elem.LABEL}}</td> to within the first loop, like this.

    <div >
    <h2 >HTML Table</h2>

<table *ngFor="let item of REGROUPEMENT">
  <tr>
    <th>TYPE</th>
    <th>PRICE</th>
  </tr>
  <tr >
    <td>{{ item.ASSETCATLABEL }}</td>
    <td>{{ item.AMOUNT }}</td>
  </tr>

  <tr>
    <th>COUNTRY</th>
    <th>LABEL</th>
    <th>ISINCODE</th>
  </tr>
  <tr *ngFor="let elem of item.ELEMENT">
    <td> {{ elem.PAYS_LIB }} </td>
    <td> {{ elem.LABEL}}</td>
    <td> {{ elem.ISINCODE}}</td>
  </tr>
</table>
</div>

This gives a table like this:

COUNTRY     LABEL       ISINCODE
BELGIUM     AB INBEV    NO0010571698
FRENCH      WWI         AO0010571614

I can't be certain of that being what you want, because I am unsure how to interpret your question. You say:

<th>COUNTRY:</th>
BELGIUM
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

... but surely you would want BELGIUM to be inside a pair of tags, e.g. <td>BELGIUM</td>? And would you really want a heading row, then a data row, and then another heading row, all within the same table? That is a little unusual.

So I have used my imagination to guess what you wanted.

It is possible that you want to group all the BELGIUM items together, in one table, and then all the FRENCH ones, in another table. However, if that is the case please show an explicit example of what you want, with tags around each piece of output text.