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

Creating balanced numerical values within the range of 0 to 1 using an array

What is the best way to implement Angular translation for multiple values in a typescript file, while also incorporating parameters?

An effective method for converting a string into a two-dimensional array using JavaScript

Creating a Runescape Tracker: What essentials should I include?

Methods for dynamically altering the background color of a parent component from a child component

What is the best way to incorporate lottiefiles for a loading animation on a Next.js project's landing

Having difficulty locating the correct TypeScript interface for executing GraphQL queries in a React application using Apollo Client

Tips for dynamically loading a modal

Incremental migration to Next.js within the current React application

Issue with jQuery.off when using a dynamic function name

redux - managing asynchronous storage using key-value pairs

Is TypeScript the new replacement for Angular?

Problem with image title in jQuery mobile

JavaScript - Implementing dependency injection with promises

How can you select a variable using Jquery?

Issue with Enter key not working on an individual textbox within Javascript/PHP chat functionality

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

What could be causing NPM to generate an HTTP Error 400 when trying to publish a package?

Perform a single click and a double click on an anchor element in the document

There seems to be a problem as exits.success is not a recognized function -