top of page

Published: January 22, 2020

Updated: January 22, 2020

6

1467

How to Filter a Dataset and Remove Duplicates From Dropdown List Using Corvid

Category(s)

-Side Menu-
Category

Title

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

What Was Covered:

- Add Repeater

- Add User Inputs

- Add Database Connections

- Setting up database connections

- Connect Repeater to database collection

- Create code using Corvid to display filtered items

- Create code to get distinct values for the dropdown list

- Test the code using the preview mode

 

Code Snippet to follow along with the video:


Page Code


This imports the wixData API

import wixData from 'wix-data';

This loads the dropdown list of distinct or non-duplicated values

$w.onReady(function () {
 //TODO: write your page related code here...
    loadContinents()
});

function loadContinents () {    wixData.query("Countries").limit(1000).ascending("continent").distinct("continent").then((results) => {
 let distinctList = results.items.map(element => { return {label: element, value: element};})
        distinctList.unshift({"value": "", "label": "All Continents"})
        $w("#sContinent").options = distinctList
    })
}

Next is the function that is needed to filter the dataset

let lastFilterKeywords;
let lastFilterContinent;

function filter (keywords, continent) {
 if (lastFilterKeywords !== keywords || lastFilterContinent !== continent) {
 let newFilter = wixData.filter();
 if (keywords) {//this will check to see if there are any value for keywords
            newFilter = newFilter.contains("articleTitle", keywords)
        }
 if (continent) { //this will check to see if there are any value for continent
            newFilter = newFilter.contains("continent", continent)
        }
        $w("#dataset1").setFilter(newFilter);
        lastFilterKeywords = keywords;
        lastFilterContinent = continent;
    }
}

You can also try a filter to include both parameters to an ' and ' statement.

function filter(keywords, continent) {

 if (lastFilterKeywords !== keywords || lastFilterContinent !== continent) {
 let newFilter = wixData.filter();
 let sameFilter = wixData.filter()
 if (keywords) {
            newFilter = newFilter.contains("articleTitle", keywords);
        }
 if (continent) {
            newFilter = newFilter.and(sameFilter.contains("continent", continent));
        }
        $w("#dataset1").setFilter(newFilter);
        lastFilterKeywords = keywords;
        lastFilterContinent = continent;
    }
}

Then the last thing is to connect the two user inputs to the page code to do the filtering via on change or keypress event

let onTime;

export function sKeyword_keyPress(event) {
 //Add your code for this event here: 
 if (onTime) {
        clearTimeout(onTime)
        onTime = undefined;
    }
    onTime = setTimeout(() => {
        filter($w("#sKeyword").value, lastFilterContinent)
    }, 500)
}

export function sContinent_change(event) {
 //Add your code for this event here: 
    filter(lastFilterKeywords, $w("#sContinent").value);
}
 

More Wix Tutorials:

- Wix Tutorials for Beginners

This Wix playlist will have multiple Wix tutorials uploaded EVERY WEEK of 2020! Comment below for any Wix troubles you may have.


- Wix Tutorials 2020


- More playlist here


+ more to come in the future!



1,467 views
SIGN UP

Get notified of upcoming articles.

Get Started
View More Categories
Images
Animations
Recent Post

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Did this help?

Yes
No

Thanks, we'll pass on your feedback to improve our services.

bottom of page