Get string of nested object

Question

I have an object that looks like this:

public serviceTable: Services[] = [
  { 1: { service: 'Service 1', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} },
  { 2: { service: 'Service 2', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} },
  { 3: { service: 'Service 3', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} }
];

Now in HTML, I want to output the values of service in my table.

<table mat-table [dataSource]="serviceTable" #matTableService class="mat-elevation-z8">
  <ng-container matColumnDef="service">
    <th mat-header-cell *matHeaderCellDef>Service</th>
    <td mat-cell *matCellDef="let element">{{ element[1].service }}</td>
  </ng-container>

Well, element[1].service works fine and outputs the string Service 1 but this is static and I want to make it dynamic.

I have also tried it with {{element.key | json }} but that outputs nothing. So how can I make it dynamic?

you will need to loop over the serviceTable array making a td element for each item in the array — about14sheep
– about14sheep, Commented May 27, 2022 at 21:45

Sumit Sharma · Accepted Answer · 2022-05-27 21:47:43Z

2

You can add let i = index; to iterate here.

<table mat-table [dataSource]="serviceTable" #matTableService class="mat-elevation-z8">
  <ng-container matColumnDef="service">
    <th mat-header-cell *matHeaderCellDef>Service</th>
    <td mat-cell *matCellDef="let element; let i = index;">{{ element[i].service }}</td>
  </ng-container>

answered May 27, 2022 at 21:47

Sumit Sharma

1,2331 gold badge6 silver badges20 bronze badges

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

2 Comments

xRay Over a year ago

Since i starts with 0 and the IDs of my object start with 1, I have received an error. I have now changed the IDs of my object and that works great. Thank you!

Sumit Sharma Over a year ago

You can also give {{ element[i+1].service }} in that case.

Collectives™ on Stack Overflow

Get string of nested object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related