Angular4 *ngFor how to loop nested array using its key name

Question

I have the following data sample:

for now i have two nested loop, but what i want to do is, Is it possible to loop through specific key, such as *ngFor="let key of myArray.functionalArea"

My current code is:

<span *ngFor="let jobByField of countOfJobsByFields">
  <span  *ngFor="let jobByWorkType of countOfJobsByFields?.workType">
    <li (click)="searchByWorkType(jobByWorkType?._id)"><a>{{ jobByWorkType?._id }}<span class="badge badge-default pull-right item-plus-icon-custom-style">{{ jobByWorkType.total }}</span></a></li>
 </span>

and for second key i have this:

<span *ngFor="let jobByField of countOfJobsByFields">
  <span  *ngFor="let jobByFunctionalArea of countOfJobsByFields?.functionalArea">
    <li (click)="searchByFunctionalArea(jobByFunctionalArea?._id)"><a>{{ jobByWorkType?._id }}<span class="badge badge-default pull-right item-plus-icon-custom-style">{{ jobByFunctionalArea.total }}</span></a></li>
 </span>

Note i can not use the same <span *ngFor="let jobByField of countOfJobsByFields"> for both because they are separate element in my html.

let me know if this is helpful for you, plnkr.co/edit/KTJbPUzrfUftKhcAU29b?p=preview — deen
– deen, Commented Nov 13, 2017 at 6:00
@rish now check this, plnkr.co/edit/cxze8ymG0VyZKEmMrqQK?p=preview — jones
– jones, Commented Nov 13, 2017 at 6:09

deen · Accepted Answer · 2017-11-13 06:33:08Z

1

Use following code

 <span *ngFor="let jobByField of countOfJobsByFields">
<div *ngIf='jobByField.workType'>
    <span  *ngFor="let jobByWorkType of jobByField.workType">
        {{jobByWorkType._id}}
    </span>
</div>

<div  *ngIf='jobByField.functionalArea'>
    <span  *ngFor="let jobByWorkType of jobByField.functionalArea">
        {{jobByWorkType._id}}
    </span>
</div>

where JSON:-

countOfJobsByFields = [
      {
        workType: [{'_id':'Part Time', 'total':10}, {'_id': 'Full Time', 'total': 20}]
      },
      {
        functionalArea: [{'_id':'IT', 'total':10}, {'_id': 'Management', 'total': 20}]
      }

    ]

Plunker

edited Nov 13, 2017 at 6:33

answered Nov 13, 2017 at 6:19

deen

2,3359 gold badges31 silver badges55 bronze badges

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

1 Comment

jones Over a year ago

Thanks for your effort, but the same thing i have already done, with two loop.

Vivek Doshi · Accepted Answer · 2017-11-13 06:18:58Z

0

Yes you can :

<span *ngFor="let jobByField of countOfJobsByFields">
    <ng-template *ngIf='jobByField.workType'>
        <span  *ngFor="let jobByWorkType of jobByField.workType">
            {{jobByWorkType._id}}
        </span>
    </ng-template>

    <ng-template *ngIf='jobByField.functionalArea'>
        <span  *ngFor="let jobByWorkType of jobByField.functionalArea">
            {{jobByWorkType._id}}
        </span>
    </ng-template>
</span>

edited Nov 13, 2017 at 6:18

answered Nov 13, 2017 at 6:13

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

2 Comments

jones Over a year ago

countOfJobsByFields is a long list array, i do not want to use from 0, 1, etc..., because if order of array items change, it needs to change my code.

Vivek Doshi Over a year ago

@jones, please check updated answer, I think that can help you

lokesh nagpal · Accepted Answer · 2017-11-14 06:29:40Z

0

Use following code with ng-container ,it will avoid the extra div that has been used with *ngIf

<span *ngFor="let jobByField of countOfJobsByFields">
    <ng-container *ngIf='jobByField.workType'>
        <span  *ngFor="let jobByWorkType of jobByField.workType">
            {{jobByWorkType._id}}
        </span>
    </ng-container>

    <ng-container *ngIf='jobByField.functionalArea'>
        <span  *ngFor="let jobByWorkType of jobByField.functionalArea">
            {{jobByWorkType._id}}
        </span>
    </ng-container>
</span>`

answered Nov 14, 2017 at 6:29

lokesh nagpal

415 bronze badges

Collectives™ on Stack Overflow

Angular4 *ngFor how to loop nested array using its key name

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related