How to filter JSON data in ngfor iteration and get the specified value in in angular 9

Question

I am having a static defined data in JSON which i imported in my typscript. On the other side i have an ngFor iterated data in a table. My request is to compare the value got from ngFor through api (mysql data). the each value should get compare with the JSON data value or by filtering the JSON data with respect to the each iterated value. Please look at my current code and help to make it working.

html

<table id="basic-datatables" class="display table table-striped table-hover" >
                <thead>
                  <tr align="center">
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email ID</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Location</th>
                    <th>Access Control</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of userlist" align="center">
                    <td id="userId">{{item.user_id}}</td>
                    <td>{{item.First_Name}} {{item.Last_Name}}</td>
                    <td >{{item.username}}</td>
                    <td >{{item.Designation}}</td>
                    <td>{{item.Department}}</td>
                    <td>{{item.Location}}</td>
                    <td>{{item.Access_Role}}</td>
                  </tr>
                </tbody>

My ts Function

    getUserlist(){
  // tslint:disable-next-line: deprecation
  console.log('Loggin Function');

  this.querySubscription = this._backendService.getUserlist().subscribe((res: { errorCode: number; errorMessage: string; }) => {
    if (res.errorCode > 0) {
        this.error = false;
        this.errorMessage = '';
        this.dataLoading = false;
        this.savedChanges = true;
        // tslint:disable-next-line: no-string-literal
        this.userlist = res['data'];
        this.userAccess.filter(e => (e.value) = this.userlist.Access_Role);
        this.userDepartment.filter(e => (e.value) = this.userlist.Department);
        this.userDesignation.filter(e => (e.value) = this.userlist.Designation);
        this.userLocation.filter(e => (e.value) = this.userlist.Location);
        console.log(this.userlist.Access_Role);
    } else {
        this.error = true;
        this.errorMessage = res.errorMessage;
        this.dataLoading = false;
    }
  });
}

JSON data

    {
  "user_access": [
     {
        "value": "1",
        "text": "Administrator"
     },
     {
        "value": "2",
        "text": "Dept Head"
     },
     {
        "value": "3",
        "text": "Staff"
     },
     {
        "value": "4",
        "text": "Customer"
     }
  ],
  "user_department": [
     {
        "value": "1",
        "text": "Sales"
     },
     {
        "value": "2",
        "text": "Production"
     },
     {
        "value": "3",
        "text": "Planning"
     },
     {
        "value": "4",
        "text": "Design"
     },
     {
        "value": "5",
        "text": "Operation"
     },
     {
        "value": "6",
        "text": "Purchase"
     },
     {
        "value": "7",
        "text": "Service"
     },
     {
        "value": "8",
        "text": "Quality"
     },
     {
        "value": "9",
        "text": "Finance"
     },
     {
        "value": "10",
        "text": "IT"
     }
  ],
  "user_designation": [
     {
        "value": "1",
        "text": "Director"
     },
     {
        "value": "2",
        "text": "Sr.Manager"
     },
     {
        "value": "3",
        "text": "Manager"
     },
     {
        "value": "4",
        "text": "Asst.Manager"
     },
     {
        "value": "5",
        "text": "Sr.Engineer"
     },
     {
        "value": "6",
        "text": "Engineer"
     },
     {
        "value": "7",
        "text": "Sr.Excecutive"
     },
     {
        "value": "8",
        "text": "Excecutive"
     },
     {
        "value": "9",
        "text": "Supervisor"
     }
  ],
  "user_location": [
     {
        "value": "1",
        "text": "Thiruvallur - Factory"
     },
     {
        "value": "2",
        "text": "Chennai - Sales"
     },
     {
        "value": "3",
        "text": "Banglore - Sales"
     },
     {
        "value": "4",
        "text": "Hyderabad - Sales"
     }
  ]
}

Current Table in HTML view

enter image description here

Actual Table in HTML view needed

enter image description here

Answer 1

Basically, you write a pipe which you can then use in the *ngFor directive.

In your component:

filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];

In your template, you can pass string, number or object to your pipe to use to filter on:

<li *ngFor="let item of items | myfilter:filterargs">

In your pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

Link of Main Question about How to apply filters to *ngFor?