All dropdown filter code

Ask the community
,
1

I’m having trouble with
Having trouble troubleshooting the following code for one of my dropdown1. Objective is to have a the “All” option actually work and show the entire dataset3 in the repeater. I see an error in the const dropdown but I have no idea on how to fix it. The filter just defaults to the “cars” category when selected. See site link below.

Working in
Dev mode

Site link

What I’m trying to do
Display the unfiltered dataset in the repeater when “All” is selected and categories when they are selected.

What I’ve tried so far
The code is crashing at

await dataset.setFilter(
wixData.filter().eq(FILTER_FIELD, selectedValue)

import wixData from "wix-data";

const DATASET_ID = "#dataset3";
const DROPDOWN_ID = "#dropdown1";
const FILTER_FIELD = "ClassifiedCategory";
const ALL_VALUE = "__all__";

$w.onReady(async function () {
  const dataset = $w(DATASET_ID);
  const dropdown = $w(DROPDOWN_ID);

  dropdown.onChange(async (event) => {
    const selectedValue = event.target.value;

    try {
      if (!selectedValue || selectedValue === ALL_VALUE) {
        await dataset.setFilter(wixData.filter());
        return;
      }
//console.warn ("made it here")
      await dataset.setFilter(
        wixData.filter().eq(FILTER_FIELD, selectedValue)
      );
//console.warn ("made it here")
    } catch (error) {
      console.error("Unable to filter the dataset", error);
    }
    
  });

  try {
    //await dataset.onReady();
    const items = await getAllDatasetItems(dataset);
    const values = getUniqueFilterValues(items, FILTER_FIELD);

    dropdown.options = [
      { label: "All", value: ALL_VALUE },
      ...values.map((value) => ({
        label: value,
        value
      }))
    ];
    dropdown.value = ALL_VALUE;

    await dataset.setFilter(wixData.filter());
  } catch (error) {
    console.error("Unable to initialize the dataset filter", error);
  }
});

async function getAllDatasetItems(dataset) {
  const allItems = [];

  let page = await dataset.getItems(0, 1000);
  allItems.push(...page.items);

  while (dataset.hasNext()) {
    await dataset.loadMore();
    page = await dataset.getItems(0, 1000);
    allItems.push(...page.items);
  }

  return allItems;
}

function getUniqueFilterValues(items, fieldName) {
  return [...new Set(
    items
      .map((item) => item[fieldName])
      .filter((value) => value !== undefined && value !== null && value !== "")
      .map((value) => String(value).trim())
      .filter(Boolean)
  )].sort((a, b) => a.localeCompare(b));
}
2

Haven’t checked if the rest of your code is correct, but the predefined value for ‘All’ is RESET_ALL

So change it to:

const ALL_VALUE = "RESET_ALL";

See more: