Vorbly Code | WIX CODE DROPDOWN REMOVE DUPLICATES

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE DROPDOWN REMOVE DUPLICATES

Need to create a dropdown list from database without duplicates? This tutorial will show you how to remove duplications from dropdown user input from a Wix database. Your visitors will be able to select from a dynamic list with options from your database without any duplicates. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/4

THE ELEMENTS

The Page

User Input: #dropdown1​​

Repeater: #repeater1​​

The Database

Create a dynamic database menu (dataset1).

Recommended fields:

  • Menu Category (e.g. starters): title

  • Menu Item Names: items

THE CODE

Page Code

import wixData from 'wix-data';

 

$w.onReady(function () {

 

    wixData.query("menu")

      .limit(1000)

      .find()

      .then(results => {

           const uniqueItems = getUniqueItems(results.items);

           $w("#dropdown1").options = buildOptions(uniqueItems);

      });

 

  function getUniqueItems(items) {

        const itemsOnly = items.map(item => item.title);

     return [...new Set(itemsOnly)];

    }

    

    function buildOptions(uniqueList) {

        return uniqueList.map(curr => {

            return {label:curr, value:curr};

        });

    }

});

 

export function dropdown1_change(event, $w) {

    let sort = $w("#dropdown1").value;

    $w("#dataset1").setFilter(wixData.filter().eq("title", sort));

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Thank you for providing the code on this website. I am working with 3 dropdowns that should work together to filter a repeater. The code on this page: https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-WITH-MULTIPLE-FILTERS was very helpful and I have them working! However, I need to remove duplicates in the dropdowns and I am having trouble figuring out how to combine that code with the code on this page.

William

Oct 22, 2019

1

Hi William,

Thanks for leaving another comment!

You need to add these two codes separately into your page code. First, you will have to remove duplicates (this tutorial), then add the filter functions (Wix Repeater With Multiple Filters tutorial) without the "Set Dropdown Options" section of the code.

I hope this helps! Cheers!

Andrew (Vorbly)

Nov 02, 2019

0

This has been very helpful, but I would like to add a custom value to the list that would essentially reset the filter and show all possible options. I have used this code to create all the unique values in a dropdown, but I cannot figure out how to reset it without the reset button. Any suggestions?

JD Welch

Feb 25, 2020

0

Thank you. I was able to combine them and remove duplicates and have all 3 dropdowns filter the repeater. Now the problem is that on the first dropdown, it is a Reference Field, so the Item IDs are showing. I need the Titles to show, not the crazy-long Item IDs. Is there a way to fix that using this code?

And another question regarding these dropdowns. Is there also a way to create a "All ___" option as the first option in each dropdown so that each one can be reset back to "All" independently?

William

Mar 25, 2020

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP