Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Question

Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Could really use some assistance with sorting an array of objects in javascript. My users array looks like this:

var users = [

  {
    first: 'Jon',
    last: 'Snow',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85efeaebc5e2eaf1abe6eae8">[email protected]</a>'
  },

  {
    first: 'Ned',
    last: 'Stark',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c7cccdcadddba0ecccc7d4">[email protected]</a>'
  },

  {
    first: 'tywin',
    last: 'Lannister',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f0fdf3edeac4e3ebf0aae7ebe9">[email protected]</a>'
  },

]

I'm working on a method to filter through the object array:

function findMatch(searchTerm, users) {

  var results = users.filter(function(user) {
    return (user.first === searchTerm || user.last === searchTerm || user.email === searchTerm);
  });

  return results;

}

The issue I'm facing is that my search parameter searchTerm must be an exact match to the values in the array... I need it to be able to search based on a partial match instead. Any suggestions?

Your help is greatly appreciated!

javascript arrays object filter

Answer 1

Answer №1

Utilize the String#indexOf method to search for a specific string within an array of objects.

function search(str, users) {

  var results = users.filter(function(el) {
    return (el.first.indexOf(str)>-1 || el.last.indexOf(str)>-1 || el.email.indexOf(str));
  });

  return results;
}

UPDATE 1 : For case insensitive searching, utilize the String#toLowerCase method (Only supported in latest browsers).

function search(str, users) {

  var lStr = str.toLowerCase();
  var results = users.filter(function(el) {
    return (el.first.toLowerCase().indexOf(lStr)>-1 || el.last.toLowerCase().indexOf(lStr)>-1 || el.email.toLowerCase().indexOf(lStr));
  });

  return results;
}

UPDATE 2 : A more simplified version using the Array#some method.

function search(str, users) {
  return  users.filter(function(el) {
    return Object.keys(el).some(function(k){
      return el[k].toLowerCase().indexOf(str.toLowerCase())
    });
  });
}

Answer 2

Utilize the String#indexOf method to search for a specific string within an array of objects.

function search(str, users) {

  var results = users.filter(function(el) {
    return (el.first.indexOf(str)>-1 || el.last.indexOf(str)>-1 || el.email.indexOf(str));
  });

  return results;
}

UPDATE 1 : For case insensitive searching, utilize the String#toLowerCase method (Only supported in latest browsers).

function search(str, users) {

  var lStr = str.toLowerCase();
  var results = users.filter(function(el) {
    return (el.first.toLowerCase().indexOf(lStr)>-1 || el.last.toLowerCase().indexOf(lStr)>-1 || el.email.toLowerCase().indexOf(lStr));
  });

  return results;
}

UPDATE 2 : A more simplified version using the Array#some method.

function search(str, users) {
  return  users.filter(function(el) {
    return Object.keys(el).some(function(k){
      return el[k].toLowerCase().indexOf(str.toLowerCase())
    });
  });
}

Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Answer №1

Similar questions

Having trouble parsing JSON with Ajax in Pusher using PHP?

Using space as a separator for thousands when formatting integers

How to use jQuery to set a background image using CSS

How can I upload a folder with subfolders and keep the structure intact?

Error encountered with Next.js and Square API: The Fetch API cannot load due to the unsupported URL scheme "webpack-internal"

Custom input field in Material UI not communicating properly with Redux form

Infinite loop caused by Angular JS routing止

At what stage of the Angular JS application life cycle is this code being loaded?

Checking for the existence of a Vue.js component

GAS: What strategies can I implement to optimize the speed of this script?

Gradient on multiple faces in Three.js

Authentication failed due to Bcrypt.compare() returning invalid credentials

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Are there any additional performance costs associated with transmitting JSON objects instead of stringified JSON data through node.js APIs?

What is the best way to access an Ajax response outside of its function using JQuery?

Ways to mix up a term while maintaining the original first and final characters intact (Javascript)

How to Use JQuery to Display Elements with a Vague Name?

Issue: Assertion violation: The use of <Link> element is restricted to within a <Router>. Any solutions or suggestions?

Is there a way for me to utilize the imported data from one component in the context API using an arrow function?

When making a Post Request, the Req.body is found to be empty