May 30 2023

The Filter Algorithm

Searching for Abraham!

0

Obj

1

Obj

2

Obj

3

Obj

4

Obj

5

Obj

Few years back I wanted to design filters. Just want to put key words and give me the most relevant data. But the problem was finding a new library for the specific language and framework was time consuming and not effective. So I decided to build a simple algorithm for myself. Which was pretty much easy. I will show from the basics to best practices so you will build one for your project.

The first search algorithm you may come up with is linear searching. Just looking at an array from start to end. And that’s exactly what we're gonna do. But we will take it to the next level by adding various techniques on top of it. That way we can build a real world filter algorithm that can work in any data set.

To build loop based filter algorithms we need two things. The array we're gonna search for and the actual search logic.

let filters = []
const names = ['Abraham', 'John', 'Alex']
const search = 'John'
for (let i = 0; i < names.length; i++) {
  if (names[i] === search) {
      filters.push(index)
  }
}

console.log(filters); // [0]

With a simple value array we can do for-loop based searching just like the above one. But In the real world you will have multiple properties in a single array. Like the following one.

// Sample data

const tables = [
  {name: 'Abraham',age: 21,profession: 'Programmer'},
  {name: 'John',age: 28,profession: 'UI Designer'},
  {name: 'Alex',age: 38,profession: 'System Engineer'}
]

What we want to do in this data set is make a loop inside of the loop. Goes like this. We first start out with an array loop so we will have index 0, inside that loop we will have another loop that will iterate through name, age and profession then it will check if the current value is matched with the user input.

let results = []
const search = 21

for (let i = 0; i < tables.length; i++){
  const table = tables[i]
  const keys = Object.keys(table) // Getting the object keys
  for (let j = 0; j < keys.length; j++) {
    const key = keys[j]
    if (table[key] == search) {
      results.push(i) // Pushing the location of the object to results
    }
  }
}

console.log('Search result indexes: ', results)

Now we built a multi row filter algo. But this code is specific to this table. Won’t work out if we use another table. The problem is we don’t actually know ahead of time how the table is going to be structured. You need to use the same code for different tables with 10 rows. The quick solution is instead of hard coding the objects keys load them dynamically.

function loadObjectKeys(object) {
  return Object.keys(object)
}

We have a perfect code for dynamically loading filter code. But not yet. You see user types in all weird ways. If the data in the table is located as a UI Designer, the user will type designer for sake of simplicity and speed. And we have two problems here. The first one is the user typed in smaller letters, and the second one is the user type a middle word instead of a finished one.

The solution is before doing the comparison we should shift both words to smaller letters. designer == ui designer. Then check a logical statement if the input word is included in one we are searching for. We are looking for something like this designer == ui designer.

if (String(table[key]).toLowerCase().includes(String(search).toLowerCase())) {
  results.push(i) // Pushing the location of the object to results
}

Here is the same code with functions so you can copy and use it in your project. It will return a new object with a match.