In this article, I will tell you from the basics of JavaScript array to more advanced searches. Which you will be able to use with any of your JavaScript frameworks and you can also use it with Type Script.
We will search the array using the find, includes and filter methods and discuss the following issues. See, we need to search in the array in two ways.
- Static Search
- Dynamic Search
Both are needed but it all depends on the situation, we will learn both so that we do not face any problem. And stay in the article to know the technique of advanced search.
JavaScript filter function
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const filteredNumbers = numbers.filter((number) => {
return number > 10;
});
console.log(filteredNumbers); // Output: [11, 12, 13, 14, 15]
Just a few days ago, I had to search in an array for my project. My array was of the type of array of objects and the data was coming from API, so obviously it would be dynamic, and with the help of search bar, I had to search in that data. Had to filter, just that kind of complex search can be done with the help of js filter function. let me show you my example.
private filterActualList(searchQuery: string): any[] {
let searchDataFrom = this.isCreatedSegmentActivated == true ? this.createdData : this.asignedData;
return searchDataFrom.filter(item => {
const itemString = JSON.stringify(item).toLowerCase();
return itemString.includes(searchQuery.toLowerCase());
});
}
In the above example, I had data from dynamic API which was an array of objects, so it was difficult to find what the user searched, so I used a filter function and the items would rotate in the array like a loop every time and the item would be selected. The object would be {key: value} so I converted it into a string and filtered my search query, this way I tried to work with dynamic objects. If they know better then please comment so that I and other raiders can get the knowledge.
JavaScript find method
The find method in JavaScript returns the first value we searched for in a particular array. I know you may not have understood, there is an easy way.
Suppose you have an array and you also have values in the array like 2, 8, 5, 5, 16, 20. Now you want to know which value is less than 12 in my array and you do not want all the values, just the first value which is less than digit 12. At this point you will use the js find method.
const numbers = [2, 8, 5, 5, 16, 20];
let first = numbers.find((val) => val < 12);
console.log(first);
// in this example output will be 2.
// because you can see in array 2 the first value which is less then 12.JavaScript Includes method
Simple as the name suggests, js includes method will return true or false i.e. Boolean whether our search value is in the array or not.
Now let us understand it with an example, but this time we will search array of objects instead of simple array.
const detail = [
{
'name': 'shubham',
'age': 20
},
{
'name': 'pratham',
'age': 18
},
{
'name': 'karan',
'age': 18
}
];
let first = detail.map(val => val.age).includes(18);
console.log(first);
// in this example output will be true.
// because 18 is in our array.
// you can try with 25 also it will return false.JavaScript some method
The some() method of Array instances tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array. let's see an example with same array used in Includes method example.
const detail = [
{
'name': 'shubham',
'age': 20
},
{
'name': 'pratham',
'age': 18
},
{
'name': 'karan',
'age': 18
}
];
let first = detail.some(val => val.name == 'vijay');
console.log(first);
// in this example output will be false.
// because vijay is not in our array.Summary
In this post we saw both static search and dynamic search, but both of them will be very useful to you, they are used in each of your projects, so keep them in mind.
0 Comments