Need help using selection tags to filter dataset

Ask the community
,
1

I have a movie collection. I added a “search” box to filter results based on different criteria.

2066×924 52.9 KB

Here is part of the code based on a Corvid tutorial (thanks!) and using The Movie Database API:

import {getMoviePoster, getGenresList} from 'backend/tmdbModule';
import wixData from 'wix-data'; 

let lastFilterTitle;
let lastFilterRating;
let lastFilterRuntime;
let lastFilterDateBefore;
let lastFilterDateAfter;
let lastFilterTag;
let debounceTimer;

$w.onReady(function () {
    initComp();
});

function initComp() {
    $w("#listRepeater").onItemReady( ($item, itemData, index) => {

 const poster = $item("#Poster");
 const ratings = $item("#ratingDisplay");

 // Displays 5-star rating underneath each poster
 if(!itemData.rating) {
            ratings.hide();
            $item("#nostars").show();
        } else {
            ratings.rating = itemData.rating / 2;
        }

 // Gets posters from TMDB
        getMoviePoster(itemData.title)
            .then(poster_path => {
                poster.src = "https://image.tmdb.org/t/p/w300" + poster_path;
                poster.fitMode = "fixedWidth";
                poster.show();
            })
    });

 // Populates genres selection tags
    getGenresList()
        .then(list => {
 let options = list.genres.map(function(row) {
 return { value : row.id.toString(), label : row.name }
                })
            $w('#genresTags').options = options;
        })  
}

function filter(title, rating, runtime, datebefore, dateafter, tags) {
 if (lastFilterTitle !== title || lastFilterRating !== rating || lastFilterRuntime !== runtime || lastFilterDateBefore !== datebefore || lastFilterDateAfter !== dateafter || lastFilterTag !== tags) {
 let newFilter = wixData.filter();
 if (title)
        newFilter = newFilter.contains('originalTitle', title);
 if (rating)
        newFilter = newFilter.ge('rating', rating);
 if (runtime)
        newFilter = newFilter.le('runtime', runtime);
 if (datebefore)
        newFilter = newFilter.ge('releaseDate', datebefore);
 if (dateafter)
        newFilter = newFilter.le('releaseDate', dateafter);
 if (tags)
        newFilter = newFilter.hasSome('genres', tags);

    $w('#moviesDataset').setFilter(newFilter);
    lastFilterTitle = title;
    lastFilterRating = rating;
    lastFilterRuntime = runtime;
    lastFilterDateBefore = datebefore;
    lastFilterDateAfter = dateafter;
    lastFilterTag = tags;
  }
}

The rest of the code just calls the filter function for each input element’s onChange event. Example:

export function genresTags_change(event) {
    filter(lastFilterTitle, lastFilterRating, lastFilterRuntime, lastFilterDateBefore, lastFilterDateAfter, $w('#genresTags').value);
}

Everything is working EXCEPT the selection tags. When I select one genre, nothing shows. Every movie has at least one genre. The genres field is of course an array. Here’s an example:

[
  {
    "id": 28,
    "name": "Action"
  },
  {
    "id": 53,
    "name": "Thriller"
  }
]

What am I doing wrong??

2

This little example could help you out…

https://russian-dima.wixsite.com/meinewebsite/filter-my-phones

3

Thanks for the quick reply.

I see that you are actually using tags in your collection.

So I can’t use arrays like in my post above?

4

@miguel-galvez
You can use Tags, or Arrays or Checkboxes, here another example…
Take a look to this post here.

Here someone was searching for a filter-option with tag-filter-function…
https://www.wix.com/corvid/forum/community-discussion/from-successful-search-to-a-dynamic-page-no-return-possible-after-that-i-have-to-cry-please-support-me

EDIT: Yes i was using tags-field in collection, did not try out the other option with array. You have to test it on your own.