Narrow down an array in Javascript based on several criteria

Question

Narrow down an array in Javascript based on several criteria

I am trying to implement a search functionality that filters an array and displays only the matching results.

let songs = [
   {name: 'Let It Be', artist: 'The Beatles},
   {name: 'Lady Madonna', artist: 'The Beatles },
   {name: 'Mama Mia', artist: 'The Beatles}
];

In this example, the filtering is done based on the song name.

let value = 'name';
let q = 'Let it be' // user input entered in the search box;

let songFilter = songs.filter(function(song) {
   return song[value].toString().toLowerCase().indexOf(q) != -1; // returns true or false
});

Currently, entering Let It Be in the search box will only display 'Let It Be'. But I want to be able to filter by multiple songs. For instance, entering Let It Be, Lady Madonna should return both matching songs.

I have tried various methods but haven't been successful in achieving this. I also have access to lodash which might help simplify the solution.

javascript arrays filter ecmascript-6 lodash

Answer 1

Answer №1

const filteredSongs = songs.filter(function(song) {
    ['let it be', 'lady madonna'].includes(song[value].toString().toLowerCase())
});

Answer 2

const filteredSongs = songs.filter(function(song) {
    ['let it be', 'lady madonna'].includes(song[value].toString().toLowerCase())
});

Answer 3

Answer №2

To efficiently keep track of input entries, utilize a Set to store the keys after using the split method. This approach enables you to quickly determine if there is a match or not. The Set is then passed as the context to the filter function, allowing it to be referenced with this:

let songs = [
   {name: 'Let It Be', artist: 'The Beatles' },
   {name: 'Lady Madonna', artist: 'The Beatles' },
   {name: 'Mama Mia', artist: 'The Beatles' }
];

function find(byKey, valueCsv) {
    return songs.filter(function(song) {
       return this.has(song[byKey].toLowerCase())
    }, new Set(valueCsv.trim().toLowerCase().split(/\s*,\s*/)));
}

songInput.addEventListener('input', function() {
    matches.textContent = JSON.stringify(find('name', songInput.value), null, 2);
});

Type in the name of the song(s):<input id="songInput" style="width:100%">
<pre id="matches"></pre>

Answer 4

To efficiently keep track of input entries, utilize a Set to store the keys after using the split method. This approach enables you to quickly determine if there is a match or not. The Set is then passed as the context to the filter function, allowing it to be referenced with this:

let songs = [
   {name: 'Let It Be', artist: 'The Beatles' },
   {name: 'Lady Madonna', artist: 'The Beatles' },
   {name: 'Mama Mia', artist: 'The Beatles' }
];

function find(byKey, valueCsv) {
    return songs.filter(function(song) {
       return this.has(song[byKey].toLowerCase())
    }, new Set(valueCsv.trim().toLowerCase().split(/\s*,\s*/)));
}

songInput.addEventListener('input', function() {
    matches.textContent = JSON.stringify(find('name', songInput.value), null, 2);
});

Type in the name of the song(s):<input id="songInput" style="width:100%">
<pre id="matches"></pre>

Answer 5

Answer №3

implementing Array#filter along with Array#find

let tracks = [
   {title: 'Bohemian Rhapsody', band: 'Queen'},
   {title: 'Sweet Child O\' Mine', band: 'Guns N\' Roses' },
   {title: 'Purple Haze', band: 'Jimi Hendrix'}
];
let key = 'title';
let input = 'Bohemian Rhapsody,Sweet Child O\' Mine'; // user input from form;
let splitInput = input.split(',').map(item=>item.toLowerCase());

let trackFilter = tracks.filter(t=>splitInput.find(item=>t[key].toLowerCase().indexOf(item) > -1 ) !== undefined );

console.log(trackFilter);

Answer 6

implementing Array#filter along with Array#find

let tracks = [
   {title: 'Bohemian Rhapsody', band: 'Queen'},
   {title: 'Sweet Child O\' Mine', band: 'Guns N\' Roses' },
   {title: 'Purple Haze', band: 'Jimi Hendrix'}
];
let key = 'title';
let input = 'Bohemian Rhapsody,Sweet Child O\' Mine'; // user input from form;
let splitInput = input.split(',').map(item=>item.toLowerCase());

let trackFilter = tracks.filter(t=>splitInput.find(item=>t[key].toLowerCase().indexOf(item) > -1 ) !== undefined );

console.log(trackFilter);

Answer 7

Answer №4

Reiterating my point made in the previous comment:

let songs = [
   {name: 'Let It Be', artist: 'The Beatles'},
   {name: 'Lady Madonna', artist: 'The Beatles'},
   {name: 'Mama Mia', artist: 'The Beatles'}
];

let value = 'name';
let q = 'Let it be, Lady madonna';

// To begin with: divide the q value into individual songs (and convert them to lowercase)
let qSongs = q.split(', ').map(e => e.toLowerCase());

// Next: filter out songs that match the ones in the above result array (qSongs)
// for each song in the songs array
let songFilter = songs.filter(song => 
  // check if there is any qsong in the qSongs array such that the value of song matches qsong
  qSongs.some(qsong => 
    song[value].toLowerCase().indexOf(qsong) != -1
  )
);
    
console.log(songFilter);

Answer 8

Reiterating my point made in the previous comment:

let songs = [
   {name: 'Let It Be', artist: 'The Beatles'},
   {name: 'Lady Madonna', artist: 'The Beatles'},
   {name: 'Mama Mia', artist: 'The Beatles'}
];

let value = 'name';
let q = 'Let it be, Lady madonna';

// To begin with: divide the q value into individual songs (and convert them to lowercase)
let qSongs = q.split(', ').map(e => e.toLowerCase());

// Next: filter out songs that match the ones in the above result array (qSongs)
// for each song in the songs array
let songFilter = songs.filter(song => 
  // check if there is any qsong in the qSongs array such that the value of song matches qsong
  qSongs.some(qsong => 
    song[value].toLowerCase().indexOf(qsong) != -1
  )
);
    
console.log(songFilter);

Answer 9

Answer №5

let songs = [
  { name: 'Let It Be', artist: 'The Beatles' },
  { name: 'Lady Madonna', artist: 'The Beatles' },
  { name: 'Mama Mia', artist: 'The Beatles' }
];

let value = 'name';
let q = 'Let it be, Lady madonna';

let songFilter = _.filter(songs, (song) => {
  let regex = new RegExp(q.replace(/\s*,\s*/g, '|'), 'gi');
  return regex.test(song[value]);
});

console.log(songFilter);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 10

let songs = [
  { name: 'Let It Be', artist: 'The Beatles' },
  { name: 'Lady Madonna', artist: 'The Beatles' },
  { name: 'Mama Mia', artist: 'The Beatles' }
];

let value = 'name';
let q = 'Let it be, Lady madonna';

let songFilter = _.filter(songs, (song) => {
  let regex = new RegExp(q.replace(/\s*,\s*/g, '|'), 'gi');
  return regex.test(song[value]);
});

console.log(songFilter);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Narrow down an array in Javascript based on several criteria

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for utilizing a dot-separated string as the object path for the v-model directive in Vue

modifying the click state using a variable in jquery

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

Array automatically updates its values

Looking to find a specific array value in MongoDB and add to it?

Node.js: Exploring the Differences Between Synchronous and Asynchronous Code

Sending out a command does not equate to establishing Redux with an outcome

"JavaScript code for creating a dynamic switching effect in HTML

Add the schema-form to the app.module for importing

Top tips for accessing a file that has been uploaded using the $http service and the HTML5

How can jQuery grep be used with dual arrays?

How to Exclude ress.css in Vuetify.js

Can you explain the distinction between key and id in a React component?

The browser window is converting the date automatically

Duplicating a file within the Flask app directory while understanding its designated web route

Reloading the table columns in a JSP page with a click of the refresh button on every row using AJAX and JavaScript

Is there a way to conceal the parent div when all of its child divs are hidden?

Is it secure to send the one-time authorization code for Google+ Hybrid server-side flow over HTTP?

The Apexchart-reactjs library is currently unable to display Arabic language in the labels

Sorting through alike numbers and separating them into distinct arrays