[Vuejs]-Recoding for component API?

by

1👍

✅

The filter is not successful because track.genre is a comma separated string of multiple genres. Say your selected filters were "Rock" and "Pop" and your track has genre "Pop, Rock". Your filter is then trying to do:

["Rock", "Pop"].includes("Pop, Rock") // no match found

The filter would only produce a match here if the genreFilter included the entire string being tested, e.g.

["Rock", "Pop", "Pop, Rock"].includes("Pop, Rock") // 1 match found

One possible strategy to deal with this is to convert the string "Pop, Rock" into an array of strings using String.split() then test every value in that array against every value in the genreFilter array. Using Array.some() you can do it like this:

if (genreFilter.value.length > 0) {
  const trackGenres = track.genre.split(', ');
  filtered = filtered.filter(track =>
    genreFilter.value.some(g => trackGenres.includes(g))
  );
}

One pitfall to watch out for is that every track with multiple genres needs to be separated exactly by comma space ", ". If the JSON is missing a space between commas, or a genre has a comma as part of its name, you’ll get a bad result and you’ll need to rethink how you split and/or take into consideration special cases.

👤yoduh

Leave a comment