How to perform a dynamic search within a nested array?

Question

Let's say that I have a music app that showcases the tracks within a selected playlist. If I'm using React, I would have a state for the tracklist which would contain an array of objects. The object would contain information about the track. Here's an example:

{
  id: 1
  name: 'Calm Down'
  artist: ['Selena Gomez', 'Rema']
  album: 'Calm Down'
}

I have another state for the search text called searchTerm. If I'm trying to search for a specific song name, I can write some code like this:

function dynamicSearch() {
    return tracklist.filter(track =>
      track.name.toLowerCase().includes(searchTerm.toLowerCase()))
}

But how do I search for an artist, in this example Selena Gomez, if there's more than one and they're inside an array?

Make sure your string values in your objects are quoted. Also will `artist` _always_ be an array, or only if there are more than one? — Andy, May 03 '23 at 18:17
Does this answer your question? [How do you search an array for a substring match?](https://stackoverflow.com/questions/4556099/how-do-you-search-an-array-for-a-substring-match) — gre_gor, May 03 '23 at 18:22
[Check if an array of strings contains a substring](https://stackoverflow.com/q/44440317) — gre_gor, May 03 '23 at 18:25

score 3 · Accepted Answer · answered May 03 '23 at 18:34

3

You can use the Array.prototype.some() to tests whether at least one element in the array passes the test:

function dynamicSearch() {
  return tracklist.filter(track =>
    track.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    track.artist.some(artist =>
      artist.toLowerCase().includes(searchTerm.toLowerCase())
    )
  );
}

answered May 03 '23 at 18:34

Klone

290
1
2

This is just the answer I was looking for! Simple and straight-forward. Thanks a ton! – Bruno Oliveira May 03 '23 at 18:42

AlekseiKrivo · Answer 2 · 2023-05-03T18:35:13.343

You can do it the same way. JS Arrays have "includes" method too.

function searchByAuthor(autorName) {
  // make artists name lowercased using map and then try to find an author using includes method
  return tracklist.filter(track =>
    track.artist?.map(a => a.toLowerCase()).includes(autorName.toLowerCase()))
}

You can read more here - Array.prototype.includes()

If you need to search track by substring of artist's name the function can be like this:

function searchByAuthor(autorName) {
  const result = [];
  tracklist.forEach(track => {
    //Lowercased artist's names
    const trackArtists = track.artist?.map(a => a.toLowerCase());
    // Try to find an artist by a part of the name
    const isArtistFound = trackArtists?.find((a) => a.includes(autorName.toLowerCase())) !== undefined;
    if (isArtistFound) {
      result.push(track);
    }
  });
  return result;
}

score 0 · Answer 3 · answered May 03 '23 at 18:14

let trackList = [
  {
    id: 1,
    name: 'Calm Down',
    artist: ['Selena Gomez', 'Rema'],
    album: 'Calm Down'
  },
  {
    id: 2,
    name: 'Stir up',
    artist: ['Sir Stir', 'Rema'],
    album: 'Keep stirring'
  },
  {
    id: 3,
    name: 'Sir is stirring',
    artist: ['Sir Stir'],
    album: 'Meet Sir Stir'
  }
];

const searchByArtist = searchTerm => trackList.filter(({ artist }) =>
  artist.join('').toLowerCase().includes(searchTerm.toLowerCase()));

console.log('Sel =>', searchByArtist('Sel'), '\n\n');
console.log('ema =>', searchByArtist('ema'), '\n\n');
console.log('tir =>', searchByArtist('tir'));

How to perform a dynamic search within a nested array?

3 Answers3