Help connecting Dropdown

Ask the community
,
1

Hi all,
I’m currently attempting to connect a dropdown to a repeater for my van website. Except I am completely useless that this type of stuff. So what I did was copy a template example code and try twist it in a way that suites what I want compares to what the sample wanted. As you can imagine it did not work. I was wondering if anyone of you could help fix my mistake

1080×741 274 KB

 import wixData from 'wix-data';
import { debounce } from 'lodash';

const collectionName = 'Vans';
const debounceTime = 500;

$w.onReady(function () {
    initComps();
    initRepeater();
    buildFiltersAndPopulateRepeater();
});

async function initComps() {
 // populate $w('#dropdown1) 
 const res = await wixData.query('Vans')
        .ascending('type')
        .distinct('type')
        .then((locationData) => {
 return locationData.items.map((type) => {
 return {
                    value: type,
                    label: type
                }
            });
        });
    $w('#dropdown1').options = res;

 //bind all input elements 
 const componentsTypeArray = ['#Dropdown1', '#Dropdown2', '#Dropdown3', '#Repeater1'];

 const debounceFunction = debounce(buildFiltersAndPopulateRepeater, debounceTime);
    componentsTypeArray.forEach((compType) => {
 const compArray = $w(compType);
        compArray.forEach((comp) => {
            comp.onChange((event) => {
                debounceFunction();
            });
        });
    });
}

async function buildFiltersAndPopulateRepeater() {
 let dataQuery = wixData.query('Vans');

    dataQuery = dataQuery.eq('make', $w('#dropdown2').value);
 if ($w('#dropdown1').value) {
        dataQuery = dataQuery.eq('type', $w('#dropdown1').value);
    }

    dataQuery = dataQuery.eq('model', $w('#dropdown3').value);
 if ($w('#dropdown1').value)
 if ($w('#dropdown2')) {
            dataQuery = dataQuery.eq('make', $w('#dropdown2').value);
        }

    $w('#repeater1').data = await dataQuery.find().then((res) => res.items);
}

function initRepeater() {
    $w('#repeater1').onItemReady(($item, itemData) => {
        $item('#pImage').src = itemData.thumbnailImage;
        $item('#pName').label = itemData.vanName;
        $item('#pType').text = itemData.type;
        $item('#pMake').text = itemData.make;
        $item('#Model').text = itemData.model;

    });
}