lundi 17 avril 2023

I need help getting this checkbox filter and search to work in Vue 3 Composition API

Thank you to the people who've helped me so far. Here is a link to the code in question: Link

Here is the code that I can't get to work properly:

const trackFilter = (tracks, type) =>
state.checkboxFilter[type].length > 0
? tracks.filter((track) => {
    let length = state.checkboxFilter[type].length;
    while (length--) {
      if (track[type].indexOf(state.checkboxFilter[type][length]) !== -1) {
        return true;
      }
    }
  })
: tracks;
const state = reactive({
search: "",
checkboxFilter: {
genre: [],
moods: [],
tempo: [],
theme: [],
},
tracks: [],
filteredTracks: computed(() =>
["genre", "moods", "tempo", "theme"]
  .reduce((tracks, item) => trackFilter(tracks, item), state.tracks)
  .filter(
    (track) =>
      track.keywords.toLowerCase().match(state.search.toLowerCase()) ||
      track.title.toLowerCase().match(state.search.toLowerCase()) ||
      track.description.toLowerCase().match(state.search.toLowerCase())
  )
 ),
 });
 const { search, checkboxFilter, filteredTracks } = toRefs(state);

I am trying use checkboxes to return tracks that contain the matching genres, moods, tempos, and themes in the array of tracks. They are stored in the array as strings so it has been suggested to use string split maybe? They are stored like this:

"tracks": [

        {
          "id": 1,
          "name": "Don't Give Up",
          "description": "Epic, cinematic and climactic orchestral trailer track that will lift any action, drama or thriller.",
          "path": "./songs/Don't%20Give%20Up.mp3",
          "cover_art_path": "./images/epic-music.png",
          "license_path":"",
          "keywords":"Armageddon, Battle, Big Ending, Bomb, Break Out, Busy, Chase, Chilled, Covert Ops, Detective, Discovery, Dramatic, Edgy, Electricity, End Of The World, Enemy Approaching, Escape, Exciting, Expedition, Extreme Sports, Fear, Fight scene, Foreboding, Grinding, Hectic, Hollywood Action Adventure Movie, Hyperactive, Interrogation, Investigation, Jailbreak, Lightning, Mean, Motorbike, Nervous, Panic, Patriotic War Movie, Pensive, Pirates, Pressure, Prison, Pulsating, Search, Showdown, Super Hero, Tension, Threat, Thriller, Ticking Bomb, War, War Film, medium tempo",
          "genre":"Funk, Epic Trailer",
          "moods":"Dramatic, Soaring, Hopeful, Inspirational, Tense",
          "tempo":"Moderate, Slow",
          "theme":"Sport, Science Fiction, Landscape"
          
        },
  
        {
          "id": 2,
          "name": "Emily's Song",
          "description": "Starts of with an acoustic nature but develops into a full blend of 
    guitars and sweet percussive elements. A playful uplifting track. Great for furniture 
    adverts or corporate use.",
          "path":"./songs/Emilys%20Song.mp3",
          "cover_art_path":"./images/indie-music.png",
          "license_path": "",
          "keywords": "achievement, advertising, background, beautiful, beauty, business, business music, commercial, company, confident, corporate, corporate background, corporate presentation, corporate presentations music, corporate video, corporation, corporative, happy, high tech, hopeful, innovation, inspiration, inspirational, inspiring, light, lively, marketing, modern, motivate, motivation, motivational, music for presentation, optimistic, piano, positive, presentation, presentation music, progress, promotional, smooth, soft, strings, success, sweet, technology, uplifting, uplifting corporate",
          "genre":"Funk, Pop, Rock",
          "moods":"Uplifting, Upbeat, Playful, Childish",
          "tempo":"Moderate, Fast",
          "theme":"Corporate"
           
        },

I want to be able to not only search the array for keywords, but also to check each box (genre, mood etc. and return all tracks that have a match with each single checkbox.

I almost had it working with this code: initial checkbox code

However, this code will only return tracks that have a single string value. Comma separated values won't return.

I really do appreciate the help I have received from you all so far! @yoduh @tao

Thanks for any help in advanced.




Aucun commentaire:

Enregistrer un commentaire