How to separate data by user name in Angular 9+?

Admin 1
Viewed 176

I am trying to separate data by a user name with their respective column of data. I have different Changeable users with their data. I want to display data in the table. I am not able to do that..

Screen shot of console data

I want to display users in Name1 Name2... and their data(Cash, PhonePay, Card, etc) respectively.

HTML file

<table id="dtBasicExample" class="table table-hover table-bordered table-striped table-sm">
    <thead class="table-primary">
        <tr>
            <th class="th-sm text-danger">Division:</th>
            <th class="th-sm">Name 1</th>
            <th class="th-sm">Name 2</th>
            <th class="th-sm">Name 3</th>
            <th class="th-sm">Name 4</th>
            <th class="th-sm">Name 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="th-sm">Cash</th>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">00</td>
            <td class="th-sm">00</td>
        </tr>
        <tr>
            <th class="th-sm">Phone Pay</th>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">00</td>
            <td class="th-sm">00</td>
        </tr>
        <tr>
            <th class="th-sm">Card</th>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">00</td>
        </tr>

        <tr>
            <th class="th-sm">Cell Pay</th>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">00</td>
        </tr>
        <tr>
            <th class="th-sm">Total</th>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">0</td>
            <td class="th-sm">00</td>
        </tr>
    </tbody>
</table>

TS FILE

getSalesData() {
 console.log(this.cnvForm.value);
 this.salesService.getSalesCollectionVariance(this.cnvForm.value).subscribe(data => {
  this.recObj = data;
  console.log(this.recObj);
  this.filterData(data);
 });
}

I have data in the console but I have no any idea how to place/display respective data in the HTML file.

angular9 angular javascript
1 Answers

the following code will build your table based on your dynamic data array, your thead should look like this

<thead class="table-primary">
    <tr>
        <th class="th-sm text-danger">Division:</th>
        <th class="th-sm" *ngFor="let item of data;let index = index;">{{item?.user}}</th>
    </tr>
</thead>

and body

<tbody>
 <tr>
  <th class="th-sm">Cash</th>
  <ng-container *ngFor="let item of data; let i=index;">
    <td class="th-sm">{{item?.cash}}</td>
  </ng-container>
 </tr>
 <tr>
  <th class="th-sm">Phone Pay</th>
  <ng-container *ngFor="let item of data;let i=index;">
    <td class="th-sm">{{item?.phonePay}}</td>
  </ng-container>
 </tr>
 ...
user_43992810
Related