nested loop that should display in a table

Question

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 class="container text-center ">
    <h2 class="pt-3 pb-3">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

In the context of HTML, the result you want to obtain is broken. You might want to improve that so people can help you better. — Christian
– Christian, Commented Jan 9, 2023 at 2:51

ProfDFrancis · Accepted Answer · 2023-01-09 00:04:25Z

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 class="container text-center ">
    <h2 class="pt-3 pb-3">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.

EJoshuaS - Stand with Ukraine · Accepted Answer · 2023-04-30 14:44:01Z

2

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.

edited Apr 30, 2023 at 14:44

EJoshuaS - Stand with Ukraine

12.2k63 gold badges59 silver badges86 bronze badges

answered Jan 8, 2023 at 23:57

user796446

Comments

Christian · Accepted Answer · 2023-01-09 03:26:17Z

If this is the result you want:

Then your template should look like:

<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="2">COUNTRY</th>
    </tr>
    <ng-container *ngFor="let elem of item.ELEMENT">
        <tr>
          <td colspan=2>{{ elem.PAYS_LIB }}</td>
        </tr>
        <tr>
            <th>LABEL</th>
            <th>ISINCODE</th>
        </tr>
        <tr>
            <td>{{ elem.LABEL }}</td>
            <td>{{ elem.ISINCODE }}</td>
        </tr>
    </ng-container>
</table>

In this approach, we used the *ngFor attribute on ng-container. Basically, this tells Angular to repeat all that's inside ng-container, excluding the <ng-container/> tag itself. Then with the use of colspan=2, we "stretch" columns with no siblings to better align with the whole table, resulting in the table in the screenshot above.

Collectives™ on Stack Overflow

nested loop that should display in a table

3 Answers 3

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

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related