Question 136679 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to perform a dynamic search within a nested array?

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?

Tags:

3

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0 
    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'), 'nn');
console.log('ema =>', searchByArtist('ema'), 'nn');
console.log('tir =>', searchByArtist('tir'));
    Login or Signup to reply.
  3. 0

    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())
    )
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search