Search/Filter JavaScript Object Array

Question

I am trying to create a search/filter function that allows users to filter an array of JS objects which returns an array populated with data matching the search query.

I wish to be able to search multiple properties in one query so for example; if I search HKG it would return all 3 of the objects but if I searched HKG 12345 it would return the first object in the array.

Another example would be if I were to search 8 it would return the first 2 objects in the array from sumOfContainers property matching the query but if I searched 8 SAV it would return only the first object.

results = [];

objects = [
        {laneId:"12345", lane:"HKG-SAV", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
        {laneId:"12346", lane:"HKG-FRA", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
        {laneId:"12347", lane:"HKG-LAX", equipmentType:"20'STD", sumOfContainers: "9", baseline:"$1234", new:"$1234", newSaving:"$1234"},     
];

const Search = (toSearch) => {
 for(var i=0; i<objects.length; i++) {
   for(key in objects[i]) {
     if(objects[i][key].indexOf(toSearch)!=-1) {
       results.push(objects[i]);
     }
   }
  }
}

The problem with my attempt is that it will return duplicate data. I have come across a lot of posts online but I am finding difficulty trying to find posts seeking a similar result.

I am trying to achieve this with native JavaScript.

Just add a break right after the push. And don't forget to return results. — trincot
– trincot, Commented Nov 1, 2021 at 19:05
Array.from(new Set(results)) would make the results unique. objects.filter would probably be helpful, but these conditions (e.g. being able to search “HKG 12345”) are a bit complex. — Sebastian Simon
– Sebastian Simon, Commented Nov 1, 2021 at 19:07
@trincot The problem is I still want to filter multiple properties. This doesn't create the exact functionality I am looking for. I also want to break down the query so it can filter by multiple properties. — Corona
– Corona, Commented Nov 1, 2021 at 19:08
@Corona, it does. Just think about it: as soon as you have one key for which there is a match, you don't want to check the other keys for that same object. It is only the inner loop that you exit with that break. — trincot
– trincot, Commented Nov 1, 2021 at 19:09
@SebastianSimon Yes, I realise making the data not duplicate is quite easy but searching multiple properties in a single query makes things quite difficult. I wonder should I just break the string by spaces and re-run the Search function and then filter out all the duplicates. Not sure if that if that is the more optimal code to write. — Corona
– Corona, Commented Nov 1, 2021 at 19:10

trincot · Accepted Answer · 2021-11-01 21:21:51Z

2

Some issues:

The duplicates get added because after adding an object, you keep looking for more matches in the same object. So if there is any other key that matches, the same object will be added twice
When the search includes a space, your description says you want to treat that as a separator for multiple search terms, but your code never splits the search argument like that.
There is no return statement in your function
The key variable is not declared with var, let or const

I would suggest solving this with filter: this guarantees that you won't get duplicates. Then require that all search terms have a match: for this you can use split and every. Then require that there is at least one key that matches a search term: for this you can use some:

Don't name your search function with PascalCase, but with camelCase (so search instead of Search). The common practice is that PascalCase is reserved for constructor/class names.

const search = toSearch => {
 let terms = toSearch.split(" ");
 return objects.filter(object =>
   terms.every(term =>
     Object.values(object).some(value =>
       value.includes(term)
     )
   )
  );
}

edited Nov 1, 2021 at 21:21

answered Nov 1, 2021 at 21:14

trincot

357k38 gold badges282 silver badges338 bronze badges

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

2 Comments

A1exandr Belan Over a year ago

Simple and clean

Corona Over a year ago

I have to say, I really do respect this answer, simple, clean and elegant and produces the result I intended. I went and read the doc for each of these functions some, every and filter. JavaScript can be beautiful sometimes!

Corona · Accepted Answer · 2021-11-01 21:15:49Z

0

I came up with quite a lousy way of achieving the conditions in the question. If anyone can make this code more optimal that would be terrific.

  const search = () => {
      let toSearch = document.getElementById("search").value;
      let lanes = this.objects;
      let result = [];
      const filters = toSearch.split(" ");
      for(let i = 0; i <lanes.length; i++) {
        let search = "";
        let isMatched = true;
        for(let key in lanes[i]) {
            search += lanes[i][key] + " ";
        }
        filters.forEach(filter => {
          if(search.indexOf(filter) == -1) {
            isMatched = false;
            break;
          } 
        });
        if(isMatched) {
          result.push(lanes[i]);
        }
      }
      return result;
    }

answered Nov 1, 2021 at 21:15

Corona

3941 gold badge6 silver badges21 bronze badges

2 Comments

trincot Over a year ago

This function has a different signature than in the question. Why?

Corona Over a year ago

@trincot I rewrote the function to leave out business logic.

A1exandr Belan · Accepted Answer · 2021-11-01 22:43:06Z

If you don't mind lodash:

const _ = require('lodash');

const objects = [
        {laneId:"12345", lane:"HKG-SAV", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
        {laneId:"12346", lane:"HKG-FRA", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
        {laneId:"12347", lane:"HKG-LAX", equipmentType:"20'STD", sumOfContainers: "9", baseline:"$1234", new:"$1234", newSaving:"$1234"},     
];

const mySearch = (arr, text) => {
  const includesValue = (word, obj) => _.some(obj, (value) => _.includes(value, word));
  const words = _.words(text); 
  return arr
    .filter((obj) => 
      words.every((word) => 
        includesValue(word, obj)
      )
    );
};

console.log(mySearch(objects, 'HKG 12345'));
// [{laneId: '12345', lane: 'HKG-SAV', equipmentType: "20'STD", sumOfContainers: '8', baseline: '$1234', new: '$1234', newSaving: '$1234' }]

console.log(mySearch(objects, '8'));
// [
//   {laneId:"12345", lane:"HKG-SAV", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
//   {laneId:"12346", lane:"HKG-FRA", equipmentType:"20'STD", sumOfContainers: "8", baseline:"$1234", new:"$1234", newSaving:"$1234"},
// ]

console.log(mySearch(objects, '8 SAV'));
// [{laneId: '12345', lane: 'HKG-SAV', equipmentType: "20'STD", sumOfContainers: '8', baseline: '$1234', new: '$1234', newSaving: '$1234' }]

Collectives™ on Stack Overflow

Search/Filter JavaScript Object Array

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related