Display number of matches per row in table – Angular

June 27, 2022

To keep it short… I have entities (displayed in the table) and to an entity you can add details (which is another class that uses the primary key of entities in db). I want to display in this table how many details are linked to each entity(like below).

Now it’s just displaying the number of total details, but in reality the first one has 3 details and the second one has 1.

The table is filled like this:

<table class="table table striped" class="signalsTable" class="mat-elevation-z8">
   <thead>
     <th>Titel</th>
     <th>Beschrijving</th>
     <th>Bron</th>
     <th>Details</th>
     <th></th>
   </thead>
   <tbody>
   <tr *ngFor="let item of signalEntities" >
      <td>{{item.entityTitle}}</td>
      <td>{{item.entityDescription}}</td>
      <td>{{item.entitySource}}</td> 
      <td>{{ numberDetails }}</td>
      <td><button class="TableBtn" (click)='EditEntity(item.entityId)' mat-button ><mat-icon>edit</mat-icon>Bewerken</button>
          <button class="TableBtn" (click)='DeleteEntity(item.entityId)' mat-button ><mat-icon>delete</mat-icon>Verwijderen</button>
      </td>
   </tr>
   </tbody>
</table>

and "numberdetails" is now just a for loop that counts the number of details in the database.

     for(let i = 0; i < this.entityDetails.length; i++){
          if(this.entityDetails[i].entityId){
          this.numberDetails += 1
        }
     }

JSON sample signalEntities:

    {
    {
        "entityId": 6,
        "entityTitle": "szsgfgd",
        "entitySource": "dgsadgds",
        "entityDescription": "adfgd",
        "entitySignalId": 1,
        "entityTypeId": 1,
        "entityUserId": 1
    }

JSON sample entityDetail:

    {
        "detailId": 4,
        "detailTitle": "dsagg",
        "detailDescription": "dgadf",
        "detailSource": "sdfagfd",
        "entityId": 6,
        "signalId": 1
    }

Is there a way to achieve this, to search how many details there are per entity and add the number (per entity) to the table?

Thanks in advance.

>Solution :

You can achieve that by doing a map for example

this.signalEntities = this.signalEntities.map((item) => {
        item.entityDetails = this.entityDetails.filter((data)=> data.entityId === item.entityId); 
return item;
        })

and then on the html ill do like this

instead of

<td>{{ numberDetails }}</td>

I’ll do

<td>{{ item.entityDetails?.length}}</td>

where entityDetails can be any property name that you want. and even you can make the length count inside the map without having to add the length on the html

the map also can be used inside an observable, but that depends on the data and how the implementations is.