Check whether object property exists in an array and display that objects

Question

"employees":[  
    {"name":"Hosea", "email":"[email protected]", badge="silver"},  
    {"name":"javier", "email":"[email protected]" badge="silver"},  
    {"name":"marston", "email":"[email protected]" badge="Gold"} ,
    {"name":"arthur", "email":"[email protected]" badge="Gold"} 
]

Is there a way to loop through the array to check whether "badge" with same value exist, in the html using ngIf or ngFor?

The result will be like this

yes same badge value, so that i can categorize according to silver and gold — dev254, Aug 17 '23 at 10:20

score 0 · Answer 1 · answered Aug 17 '23 at 10:45

You need to group your objects using any groupBy function, e.g. this one from SO using TypeScript.

const groupBy = <T>(array: T[], predicate: (value: T, index: number, array: T[]) => string) =>
  array.reduce((acc, value, index, array) => {
    (acc[predicate(value, index, array)] ||= []).push(value);
    return acc;
  }, {} as { [key: string]: T[] });

In your component.ts:

public employeesByBadge = groupBy(this.employees, e => e.badge);

Then you will need to utilize 2 *ngFor directives. The first one to iterate over each key value pair of the resulting grouping (employeesByBadge), as it will be an object. Then you will need another one to iterate over the employees just as you would without any grouping applied.

In your component.html:

<div *ngFor="let group of employeesByBadge | keyvalue">
  <span>{{group.key}}</span>
  <ul>
    <li *ngFor="let employee of group.value">
    {{employee.name}}
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Aug 17 '23 at 10:49

The simplest, but non optimal way is:

<div class="gold">
    <h2>Gold</h2>
    <ng-container *ngFor="let item of items">
        <div *ngIf="item.badge === 'Gold'" class="gold">
            {{ item.name }}<br>
            {{ item.email }}
        </div>
    </ng-container>
</div>
<div class="silver">
    <h2>Silver</h2>
    <ng-container *ngFor="let item of items">
        <div *ngIf="item.badge === 'Silver'">
            {{ item.name }}<br>
            {{ item.email }}
        </div>
    </ng-container>
</div>

Better is make two different arrays of badges.

score 0 · Answer 3 · answered Aug 17 '23 at 11:01

You can try this to achive this result :

use this function to groupBy any property you want

  groupBy(xs, key) {
    return xs.slice().reduce(function (rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  }

Typescript

emps = [
    { name: 'Hosea', email: '[email protected]', badge: 'silver' },
    { name: 'javier', email: '[email protected]', badge: 'silver' },
    { name: 'marston', email: '[email protected]', badge: 'Gold' },
    { name: 'arthur', email: '[email protected]', badge: 'Gold' },
  ];
 
  groupBy(xs, key) {
    return xs.slice().reduce(function (rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  }

Html

<div *ngFor="let item of groupBy(emps,'badge') | keyvalue">
  <ul>
    <li class="col-xs-2">{{ item.key }}
      <ul *ngFor="let item2 of item.value">
        <li>name {{item2.name}}</li>
        <li>name {{item2.email}}</li>
        <hr>
      </ul>
    </li>
  </ul>
</div>

Check whether object property exists in an array and display that objects

3 Answers3