CODEWITHSUNDEEP
javascriptarraysangulartypescriptfilter
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

Custom global filter in array

How to make custom global filter

I have an array with 4 objects

objects are id name age and sex 

var xx=[{id:1,name:"Ramesh",Age:13,Sex:"M"},{id:2,name:"Ram",Age:14,Sex:"M"}
     {id:3,name:"Suresh",Age:15,Sex:"M"}{id:4,name:"Rajesh",Age:16,Sex:"M"}];

Scenarios: I have a textbox as a search box. When I type 1 in the textbox Then all the object needs to be show, because of the age contains 1. if I entering Ra in the textbox. then we should display Ramesh, Rajesh, Ram.

I have tried 

 let tempdata=[];
  tempdata.push(this.tyreAndRimList = xx.filter(x => x.name=== this.globalSearchbox));
            tempdata.push(xx.filter(x => x.age=== this.globalSearchbox));
            tempdata.push(xx.filter(x => x.sex=== this.globalSearchbox));
            let data = tempdata.map(function (obj) { return obj.id; });
            this.tyreAndRimList = data.filter(function (v, i) { return data.indexOf(v) == i; });

I have tried like, filtered and pushed to a temp array and removing duplicate objects. Am not sure is am going correct or not. PLease suggest for a better solution for this situation.

Am expecting this same functionality by manual coding: http://primefaces.org/primeng/#/datatable/filter

Suddenly I have a meeting now. So I'll give some more info later. Please wait if you don't understand this details.

Upvotes: 1

Views: 1946

Answers (3)

dashton
dashton

Reputation: 2704

If you want to search on all fields in the objects then just use filter specifying your criteria like this:

let searchValue = '1';
const res = xx.filter(item => 
          item.name.toUpperCase().includes(searchValue.toString().toUpperCase())
         || item.Age.toString().includes(searchValue)
         || item.Sex === searchValue.toString().toUpperCase());

console.log(res);

Upvotes: 0

test_124
test_124

Reputation: 1403

If I get your requirement correctly this is what you want:

You have a searchbox where you can filter data based on Age or Name.

You can create a custom pipe for this:

//template:
    <div>
     <input type="text" id="serachbox" placeholder="search" [(ngModel)] = "searchInput"/>
    </div>
    <ul>
      <li
          *ngFor = "let userList of xx | searchPipe : searchInput"    
        >
          {{userList.name}}, {{userList.age}}, {{userList.sex}}
      </li>
    </ul>


//Custom Pipe

    import { forEach } from '@angular/router/src/utils/collection';
    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'searchPipe'
    })

    export class SearchPipePipe implements PipeTransform{

        constructor(){}

        transform(value, filter){
            let resultArray = [];

            if(filter != null && filter != ""){
                if(isNaN(filter)){
                    for(let item of value){
                        if(item.name.includes(filter)){
                            resultArray.push(item);
                        }
                    }
                return resultArray;
                }else{
                    for(let item of value){
                        if(item.age.includes(filter)){
                            resultArray.push(item);
                        }
                    }
                    return resultArray;
                }
            }
            return value;
        }
    }

Upvotes: 2

Nina Scholz
Nina Scholz

Reputation: 386519

You could take an array with the property names and convert all items to string and to lower case for searching. Then return a subset of the given array.

function search(array, text) {
    text = text.toLowerCase();
    return array.filter(function (o) {
        return ['name', 'Age', 'Sex'].some(function (k) {
            return o[k].toString().toLowerCase().indexOf(text) !== -1;
        });
    });
}


var array = [{ id: 1, name: "Ramesh", Age: 13, Sex: "M" }, { id: 2, name: "Ram", Age: 14, Sex: "M" }, { id: 3, name: "Suresh", Age: 15, Sex: "M" }, { id: 4, name: "Rajesh", Age: 16, Sex: "M" }];

console.log(search(array, '1'));
console.log(search(array, 'ra'));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Upvotes: 2

Related Questions