Type Script to search multiple property in an Array object

Question

I am using Array.prototype.filter to search first name from the Object name array. I would want to modify my search to search first name and if it is not there search the last name.

student_name : any = [{name:"Udhay" ,  lname:"Ravi"},
                {name:"Sabari" , lname:"Raj"},
                {name:"Sachin" , lname:"Karthi"},
                {name:"Sudha" ,  lname:"Mohan"}]

search(){
var this.myInput = "Ravi"
this.student_name = this.student_name.filter((sn) => {               
return(sn.name.toLowerCase().indexOf(this.myInput.toLowerCase())> -1)
 })

}

Can someone please help me on this. I am very new to TypeScript and Angular 2

msmolcic · Accepted Answer · 2017-07-18 07:49:46Z

1

It would look like this:

search() {
    this.myInput = "Ravi";

    // Convert it to lower case here to avoid lower case conversion twice inside filter.
    let searchFilter = this.myInput.toLowerCase();

    this.student_name =
        this.student_name.filter(sn =>
            sn.name.toLowerCase() === searchFilter ||
            sn.lname.toLowerCase() === searchFilter);
}

filter function will perform the comparison on each element, that's why there's no need to use indexOf. It's like performing a for loop over each element in the initial array and pushing the elements that meet the condition inside a new array which will later be returned as a result of the filter function.

EDIT:

Check if any name or last name starts with the search string:

sn.name.toLowerCase().startsWith(searchFilter) ||
sn.lname.toLowerCase().startsWith(searchFilter)

Check if any name or last name contains the search string:

sn.name.toLowerCase().includes(searchFilter) ||
sn.lname.toLowerCase().includes(searchFilter)

edited Jul 18, 2017 at 7:49

answered Jul 16, 2017 at 7:55

msmolcic

6,5968 gold badges39 silver badges58 bronze badges

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

2 Comments

Udhay Over a year ago

Thank you msmolcic. Problem what I see with the solution is, it give the exact match and not the appropriate match. I want to implement the logic in search bar.

msmolcic Over a year ago

@Udhay In your example you were searching for the exact match, that's why I gave you this example. It's simple to change the filter condition if you want to check whether any name/last name starts with or contains the input string. Check the edit part of the answer and change the condition inside of the filter to suit your needs.

Aravind · Accepted Answer · 2017-07-16 07:36:38Z

0

This can be achieved easily using lodash

search(){
this.myInput = "Ravi"
this.result= _.filter(this.student_name, {'name':this.myInput});
if(_.isEmpty(this.result)){
  this.result=_.filter(this.student_name, {'lname':this.myInput})
 }
}

LIVE DEMO

answered Jul 16, 2017 at 7:36

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Comments

Yann Thibodeau · Accepted Answer · 2020-05-10 05:19:22Z

0

I have written a very simple to use library ss-search.

In your case, to search the nested array, you would do the following:

search(student_name, ["name", "lname"], "Ravi")

This will filter out the data to return only results containing "Ravi" in the name or last name property.

answered May 10, 2020 at 5:19

Yann Thibodeau

1,2711 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Type Script to search multiple property in an Array object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related