CODEWITHSUNDEEP
angular
amelabamelab440
amelabamelab440

Reputation: 75

nested loop that should display in a table

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

Upvotes: 2

Views: 448

Answers (3)

user796446
user796446

Reputation:

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.

Upvotes: 2

Christian
Christian

Reputation: 831

If this is the result you want:

enter image description here

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.

Upvotes: 3

ProfDFrancis
ProfDFrancis

Reputation: 9411

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.

Upvotes: 2

Related Questions