Angular: generic table component, looping object values

Question

I have a generic table component for a software I am developing, I am having an issue with looping the values for a table component when the table is applied.

Here employeeList is a list of data retrieved from the backend, while the data retrieval is successful, I've bumped into an issue where the table only displays the first row of data while there are many more rows to be shown. I'm guessing this is because this.items has only one object within the parathesis but I need to be able to retrieve all the data coming from the backend.

The codes snippet in ts file of a component where generic table is used

for (this.list of this.employeeList) {
          this.items = [
            {
              EmpNo: this.list.empNum,
              Icon: this.list.image,
              Name: this.list.name
            }
          ];
        }

For reference this is the html code

<app-table
  [header]="header"
  [items]="items"
>
</app-table>

The table component was created with a pipe class and some basic codes in ts and html

The pipe class:

@Pipe({
  name: 'TableData'
})

export class TableDataPipe implements PipeTransform {

    transform(obj: any) {
      const result = [];
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          result.push(obj[key]);
        }
      }
      return result;
    }
}

I appreciate any help regarding this! Thank you in advance!

Aakash Garg · Accepted Answer · 2020-06-11 18:52:59Z

1

Change this code :-

for (this.list of this.employeeList) {
          this.items = [
            {
              EmpNo: this.list.empNum,
              Icon: this.list.image,
              Name: this.list.name
            }
          ];
        }

to

  this.items = [];
for (this.list of this.employeeList) {
              this.items.push(
                {
                  EmpNo: this.list.empNum,
                  Icon: this.list.image,
                  Name: this.list.name
                }
              );
            }

answered Jun 11, 2020 at 18:52

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: generic table component, looping object values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related