Displaying JSON with Arrays as TableData in Angular10

Question

Actually i am trying to show the json response from backend as like in Tabular format.If its a single array then its working fine, if i need to print the nested array response in the same table then i have few issues.

Hope i not used standard method to retrieve, kindly correct me with solution.

Requirement:

   UserId  Username  EmailID  ProfileDivisionID QueueName 

JSON Response:

{
[
  {
    "_id": "5ff378b34b4d09aa6",
    "userRefID": "07f426ff-5db-2c7397edac61",
    "userName": "ES Purud Support",
    "divisionId": "36852a81-a1cd-7f431c05179f",
    "divisionName": "",
    "emailId": "eps@ge.com",
    "__v": 0,
    "queues": [
      {
        "_id": "5ff378b354b4d09aa1",
        "userRefID": "07f426ff-5062c7397edac61",
        "queueRefId": "c02db2a-a9cd-0f16c823646b",
        "queueName": "test",
        "__v": 0
      },
      {
        "_id": "5ff378b3145b3c54b4d09aa2",
        "userRefID": "07f426ff-506f-4e5e-afdb-2c7397edac61",
        "queueRefId": "a626d99e-f5e9-47ab-a5d0-d493003c737f",
        "queueName": "CaIMS",
        "__v": 0
      },
    ],
  },
{
    "_id": "5ff378b34d09aa7",
    "userRefID": "c5ce06dc-628-f5fc5a918295",
    "userName": "neric",
    "divisionId": "36852a81-ad7f7f431c05179f",
    "divisionName": "",
    "emailId": "intebeb45b9d295@webhook.com",
    "__v": 0,
    "queues": [
      {
        "_id": "5ff378b3154b4d09aeb",
        "userRefID": "c5ce06dc-f5fc5a918295",
        "queueRefId": "f3bf0897f-5b18fc03401b",
        "queueName": "Aseem",
        "__v": 0
      },
      
    ],
  }
]
}

Angular HTML:

<app-sr1></app-sr1>
<div class="container">
    <h1>Click to get the userdetails</h1>
    <div>
        <button (click)="Usersgetlist()" type="button" class="btn btn-success text">Get Userlist</button> 
    </div>

<div *ngIf= "this.userhide == true"  class="paddingclass">
<table class="table table-bordered">
<thead>
  <tr class="header_color">
    <th>User Id</th>
    <th>User Name</th>
    <th>Email ID</th>
    <th>Profile DivisionName</th>
    <th>Profile DivisionID</th>
    <th>queueName</th>
  </tr>
</thead>
<ng-container *ngFor="let project of userAllList">
  <tr>
  <td>{{ project.userRefID }}</td>
  <td>{{ project.userName}}</td>
  <td>{{ project.emailId }}</td>
  <td>{{ project.divisionName }}</td>
  <td>{{ project.divisionId }}</td>
</tr>
 <tr *ngFor="let project1 of project.queues">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>{{project1.queueName}}</td>
   </tr>
</ng-container>

</table>
</div>
</div>

Current Output:

Here Queue column i am not able to render it with smooth, here spacing issues.

Answer 1

You are actually creating another row for each nested item with:

<tr *ngFor="let project1 of project.queues">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>{{project1.queueName}}</td>
   </tr>

You should put them in a td on the same row, iterating on a span tag. You can finally add styles on the spans to fit your needs

<ng-container *ngFor="let project of userAllList">
  <tr>
  <td>{{ project.userRefID }}</td>
  <td>{{ project.userName}}</td>
  <td>{{ project.emailId }}</td>
  <td>{{ project.divisionName }}</td>
  <td>{{ project.divisionId }}</td>
  <td>
    <span *ngFor="let project1 of project.queues">{{project1.queueName}}</span>
   </td>
</tr>