Exploring an array of objects to find a specific string similar to the one being

Question

Exploring an array of objects to find a specific string similar to the one being

I recently developed a TypeScript code snippet that searches for objects in a list by their name and surname, not strictly equal:

list = list.filter(
  x => (x.surname + ' ' + x.name)
          .trim()
          .toLowerCase()
          .search(filter.toLowerCase()) >= 0);

For instance, if I search for "al" and want to find "Alex", the code will display "Alex" as a valid result.

However, when I migrated this code to a JavaScript environment, it encountered errors related to the search function and trim method.

Is there a more efficient way to achieve this functionality without resorting to nested loops?

javascript typescript

Answer 1

Answer №1

It seems like your code is in good shape and works well for the scenario you explained, with the exception of outdated browsers that do not support arrow functions.

Another point to note is that when using search, a regex is created from the string provided which could lead to unexpected outcomes if, for instance, a simple period . is passed; in such cases, it might be better to use indexOf.

Below is a demonstration showcasing both methods:

function findUsingSearch(list, filter) {
  return list.filter(
    x => (x.surname + ' ' + x.name)
    .trim()
    .toLowerCase()
    .search(filter.toLowerCase()) >= 0);
}

function findUsingIndexOf(list, filter) {
  return list.filter(
    x => (x.surname + ' ' + x.name)
    .trim()
    .toLowerCase()
    .indexOf(filter.toLowerCase()) >= 0);
}

var data = [{ surname: 'Alex', name: 'Foo' }, { surname: 'Oleg', name: 'Bar' }];

console.log('*** findUsingSearch:')
console.log(findUsingSearch(data, 'al'));
console.log(findUsingSearch(data, 'ol'));
console.log(findUsingSearch(data, 'ul'));
console.log(findUsingSearch(data, '.'));

console.log('*** findUsingIndexOf:')
console.log(findUsingIndexOf(data, 'al'));
console.log(findUsingIndexOf(data, 'ol'));
console.log(findUsingIndexOf(data, 'ul'));
console.log(findUsingIndexOf(data, '.'));

Answer 2

It seems like your code is in good shape and works well for the scenario you explained, with the exception of outdated browsers that do not support arrow functions.

Another point to note is that when using search, a regex is created from the string provided which could lead to unexpected outcomes if, for instance, a simple period . is passed; in such cases, it might be better to use indexOf.

Below is a demonstration showcasing both methods:

function findUsingSearch(list, filter) {
  return list.filter(
    x => (x.surname + ' ' + x.name)
    .trim()
    .toLowerCase()
    .search(filter.toLowerCase()) >= 0);
}

function findUsingIndexOf(list, filter) {
  return list.filter(
    x => (x.surname + ' ' + x.name)
    .trim()
    .toLowerCase()
    .indexOf(filter.toLowerCase()) >= 0);
}

var data = [{ surname: 'Alex', name: 'Foo' }, { surname: 'Oleg', name: 'Bar' }];

console.log('*** findUsingSearch:')
console.log(findUsingSearch(data, 'al'));
console.log(findUsingSearch(data, 'ol'));
console.log(findUsingSearch(data, 'ul'));
console.log(findUsingSearch(data, '.'));

console.log('*** findUsingIndexOf:')
console.log(findUsingIndexOf(data, 'al'));
console.log(findUsingIndexOf(data, 'ol'));
console.log(findUsingIndexOf(data, 'ul'));
console.log(findUsingIndexOf(data, '.'));

Answer 3

Answer №2

If my interpretation of the question is correct, you are dealing with an array of objects structured like this:

const individuals = [
  { firstName: 'Alice', lastName: 'Jones' },
  { firstName: 'Bob', lastName: 'Smith' },
  { firstName: 'Charlie', lastName: 'Brown' }
];

It seems that you aim to search through this list for a person whose name matches a specific partial string (let's call it partialName)? You can achieve this using the following code snippet:

const result = individuals.find(
  person => {
    const firstName = person.firstName.toLowerCase();
    const lastName = person.lastName.toLowerCase();

    if (`${firstName}${lastName}.includes(partialName.toLowerCase()) {
      return person;
    }
  }
);

This logic can also be condensed into a single line for easier readability:

const result = individuals.find(person => `${person.firstName.toLowerCase()}${person.lastName.toLowerCase()}`.includes(partialName.toLowerCase()));

If you prefer to get an array containing all matching results, simply replace find with filter:

const result = individuals.filter(person => `${person.firstName.toLowerCase()}${person.lastName.toLowerCase()}`.includes(partialName.toLowerCase()));

Answer 4

If my interpretation of the question is correct, you are dealing with an array of objects structured like this:

const individuals = [
  { firstName: 'Alice', lastName: 'Jones' },
  { firstName: 'Bob', lastName: 'Smith' },
  { firstName: 'Charlie', lastName: 'Brown' }
];

It seems that you aim to search through this list for a person whose name matches a specific partial string (let's call it partialName)? You can achieve this using the following code snippet:

const result = individuals.find(
  person => {
    const firstName = person.firstName.toLowerCase();
    const lastName = person.lastName.toLowerCase();

    if (`${firstName}${lastName}.includes(partialName.toLowerCase()) {
      return person;
    }
  }
);

This logic can also be condensed into a single line for easier readability:

const result = individuals.find(person => `${person.firstName.toLowerCase()}${person.lastName.toLowerCase()}`.includes(partialName.toLowerCase()));

If you prefer to get an array containing all matching results, simply replace find with filter:

const result = individuals.filter(person => `${person.firstName.toLowerCase()}${person.lastName.toLowerCase()}`.includes(partialName.toLowerCase()));

Exploring an array of objects to find a specific string similar to the one being

Answer №1

Answer №2

Similar questions

Embracing Typescript promises over jQuery deferred for improved code efficiency and reliability

Adding connected types to a list using Typescript

Tips for updating the pagination layout in Material UI Table

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Verification of the data entered in the input box

Tips for maintaining type information when using generics in constructors

What could be causing FormArrayName to consistently display as undefined in my HTML code, even when the safe-navigation operator is employed

Adjusting and arranging multiple thumbnail images within a container of specific width and height

What is the best method for sharing templates and logic in VUE?

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

Exploring modules alias functionality in TypeScript

turning off next.js server side rendering in order to avoid potential window is undefined issues

creating a Vue app using Node results in an HTML page with no content due to syntax errors

I'm curious about how to implement textarea functionality within Angular for modeling purposes

Put a watch on a variable as soon as it is set

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

What is the best way to handle the resolution of multiple promises as they complete?

Unearthing the worth of the closest button that was clicked

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

empty responseText from GET request using AJAX