Question 232029 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

"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?

this will be the output

The result will be like this

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    You can try this to achive this result :

    enter image description here

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search