.setFilter error for Filtering Repeater with Dataset after bring inputs in from another page

[blairretnauer]

Question:
Can someone tell me how to fix this code so that when the page loads after someone has selected inputs on the previous page, it shows the data that matches, in the repeater? I was able to get the data to transfer to the dropdowns on the left side but for some reason they will not filter the data on the repeater. It works on other pages not linked to another page but when I try to just get the data from the home page, it does not work.

What are you trying to achieve:
The first page with input boxes to select options for the dataset to filters:
Home Page

Selection options section:

Second Page with results of inputted selections:
Results Page

Page that the code is working on with the dropdowns filtering the repeater when selected:
Working Page

The dropdowns on the left and the repeater is on the right side:

I need the working page combined with the home page selections in the dropdowns filtering the repeater on page load and then be able to change the dropdowns and checkmarks after page loads if needed and the repeater will update.

I keep getting an error code for the .setFilter part of the code.

First Page Code:

import wixLocation from 'wix-location';

$w.onReady(function () {
    // Add click event handler for search button
    $w('#searchButton').onClick(submitSearch);
});

function submitSearch() {
    // Get selected values from radio buttons
    const bedrooms = $w('#bedschoices').value;
    const bathrooms = $w('#bathschoices').value;
    const levels = $w('#levelschoices').value;

    // Get min and max square footage values
    const minSquareFeet = $w('#minInput').value;
    const maxSquareFeet = $w('#maxInput').value;

    // Construct URL with parameters
    let searchParams = `?bedrooms=${bedrooms || ''}&bathrooms=${bathrooms || ''}&levels=${levels || ''}&minSquareFeet=${minSquareFeet || ''}&maxSquareFeet=${maxSquareFeet || ''}`;
    let searchResultsURL = `https://blair946.wixsite.com/homeplansource/search-results${searchParams}`;

    // Navigate to search results page
    wixLocation.to(searchResultsURL);
}

Second Page Code:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

let debounceTimer;
let searchWord;

$w.onReady(() => {
    // Extract URL parameters
    const urlParams = wixLocation.query;

    // Set dropdown and input values from URL parameters
    $w('#dropdown1').value = urlParams.bedrooms || "";
    $w('#dropdown2').value = urlParams.bathrooms || "";
    $w('#dropdown3').value = urlParams.levels || "";
    $w('#minValueInput').value = urlParams.minSquareFeet || "";
    $w('#maxValueInput').value = urlParams.maxSquareFeet || "";

    // Add event handlers for checkboxes
    $w("#checkbox1").onChange(filter);
    $w("#checkbox2").onChange(filter);
    $w("#checkbox3").onChange(filter);
    $w("#checkbox4").onChange(filter);
    $w("#checkbox5").onChange(filter);

    // Set up event handler for min and max value inputs
    $w("#minValueInput").onChange(filter);
    $w("#maxValueInput").onChange(filter);

    // Set up event handler for search bar input
    $w("#searchbar").onKeyPress(() => {
        const search = $w("#searchbar").value;
        debounceFilter(search);
    });

    // Call the filter function initially
    filter();
});

// Function to debounce search filter
function debounceFilter(search) {
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }
    debounceTimer = setTimeout(() => {
        filter(search);
    }, 200);
}

// Filter function
async function filter(search) {
    const selectedTags = [];
    const minValue = Number($w("#minValueInput").value);
    const maxValue = Number($w("#maxValueInput").value);

    // Add selected tags to the array
    if ($w("#checkbox1").checked) selectedTags.push("Coastal Home Plans");
    if ($w("#checkbox2").checked) selectedTags.push("Craftsman Home Plans");
    if ($w("#checkbox3").checked) selectedTags.push("Stephen Alexander Homes Plans");
    if ($w("#checkbox4").checked) selectedTags.push("Single Story Home Plans");
    if ($w("#checkbox5").checked) selectedTags.push("Townhouse Home Plans");

    // Construct filter criteria
    let filterCriteria = wixData.query("Properties");

    // Add selected tags filter
    if (selectedTags.length > 0) {
        filterCriteria = filterCriteria.hasSome("type", selectedTags);
    }

    // Add min and max value filters
    if (minValue || maxValue) {
        filterCriteria = filterCriteria.between("squareFeet1", minValue, maxValue);
    }

    // Add search query filter
    if (search) {
        filterCriteria = filterCriteria.contains("type", search)
                        .or(filterCriteria.contains("price", search))
                        .or(filterCriteria.contains("propertyName", search))
                        .or(filterCriteria.contains("about", search))
                        .or(filterCriteria.contains("sku", search))
                        .or(filterCriteria.contains("squareFeet", search));
    }

    try {
        // Set filter on dataset
        $w("#dataset1").setFilter(filterCriteria);

        // Fetch filtered data
        const queryResult = await filterCriteria.find();
        const repeaterData = queryResult.items;

        // Update repeater with filtered data
        $w('#repeaterresults').data = repeaterData;

        // Display number of results
        const count = repeaterData.length;
        $w("#text152").text = count > 0 ? `${count} Results Found` : `No Results Found`;
    } catch (err) {
        console.error("Error filtering data:", err);
    }
}

Page with working code not connected to another page:

import wixData from 'wix-data';

let debounceTimer;

$w.onReady(() => {
    // Set up event handlers for each checkbox
    $w("#checkbox1").onChange(() => {
        filter();
    });
    $w("#checkbox2").onChange(() => {
        filter();
    });
    $w("#checkbox3").onChange(() => {
        filter();
    });
    $w("#checkbox4").onChange(() => {
        filter();
    });
    $w("#checkbox5").onChange(() => {
        filter();
    });

    // Set up event handler for min and max value inputs
    $w("#minValueInput").onChange(filter);
    $w("#maxValueInput").onChange(filter);

    // Set up event handler for search bar input
    $w("#searchbar").onKeyPress(() => {
        const search = $w("#searchbar").value;

        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }
        debounceTimer = setTimeout(() => {
            filter(search);
        }, 200);
    });
});

// Filter function
async function filter(search) {
    const selectedTags = [];

    // Add selected tags to the array
    if ($w("#checkbox1").checked) selectedTags.push("Coastal Home Plans");
    if ($w("#checkbox2").checked) selectedTags.push("Craftsman Home Plans");
    if ($w("#checkbox3").checked) selectedTags.push("Stephen Alexander Homes Plans");
    if ($w("#checkbox4").checked) selectedTags.push("Single Story Home Plans");
    if ($w("#checkbox5").checked) selectedTags.push("Townhouse Home Plans");

    const minValue = Number($w("#minValueInput").value);
    const maxValue = Number($w("#maxValueInput").value);

    let filterQuery = wixData.query("Properties");

    // Add filter for selected tags
    if (selectedTags.length > 0) {
        filterQuery = filterQuery.hasSome("type", selectedTags);
    }

    // Add filter for min and max values
    if (minValue || maxValue) {
        filterQuery = filterQuery.between("squareFeet1", minValue, maxValue);
    }

    // Add search query filter
    if (search) {
        filterQuery = filterQuery.contains("type", search)
                        .or(filterQuery.contains("price", search))
                        .or(filterQuery.contains("propertyName", search))
                        .or(filterQuery.contains("about", search))
                        .or(filterQuery.contains("sku", search))
                        .or(filterQuery.contains("squareFeet", search));
    }

    // Set filter and count results
    const filterResult = await filterQuery.find();
    $w("#dataset1").setFilter(filterQuery);

    // Display number of results
    const count = filterResult.totalCount;
    $w("#text152").text = count > 0 ? `${count} Results Found` : `No Results Found`;

    // Filter repeater data based on selected tags
    let repeaterFilter = wixData.query("Properties");
    if (selectedTags.length > 0) {
        repeaterFilter = repeaterFilter.hasSome("type", selectedTags);
    }
    if (minValue || maxValue) {
        repeaterFilter = repeaterFilter.between("squareFeet1", minValue, maxValue);
    }
    if (search) {
        repeaterFilter = repeaterFilter.contains("type", search)
                            .or(repeaterFilter.contains("price", search))
                            .or(repeaterFilter.contains("propertyName", search))
                            .or(repeaterFilter.contains("about", search))
                            .or(repeaterFilter.contains("sku", search))
                            .or(repeaterFilter.contains("squareFeet", search));
    }

    const repeaterQueryResult = await repeaterFilter.find();
    const repeaterData = repeaterQueryResult.items;
    $w('#repeaterplans').data = repeaterData;
}

I’m pretty new to Wix coding so please bear with me and please take that into consideration in your response. The more explanation the better because I most likely don’t know something you are referring to.

Thanks in advance for your help!

[anthony]

@blairretnauer

I was able to get the data to transfer to the dropdowns on the left side but for some reason they will not filter the data on the repeater. It works on other pages not linked to another page but when I try to just get the data from the home page, it does not work.

Are you getting an error message in the console?

[blairretnauer]

Hello I’ve been messing around with code since posting this and still no success in fixing it. I keep getting a 429 error code of too many requests when I change a few things. This is the only error code I get: Failed to load resource: sentry-next.wixpress.com/api/68/store/?sentry_key=605a7baede844d278b89dc95ae0a9123&sentry_version=7:1 the server responded with a status of 429 ()

Is there something I should change on my most recent code to fix this? When I run the code, I don’t get any errors in the logs either and it goes through all the way to the final console log of “Filtering complete.”

Everything else is working just the repeater is not showing the data from the dropdowns and selected on the previous page. Any help is appreciated! Thanks!

Most recent code:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

let debounceTimer;

$w.onReady(async () => {
    // Extract URL parameters
    const urlParams = wixLocation.query;

    // Set dropdown and input values from URL parameters
    $w('#dropdown1').value = urlParams.bedrooms || "";
    $w('#dropdown2').value = urlParams.bathrooms || "";
    $w('#dropdown3').value = urlParams.levels || "";
    $w('#minValueInput').value = urlParams.minSquareFeet || "";
    $w('#maxValueInput').value = urlParams.maxSquareFeet || "";

    // Filter function
    await filter();

    // Call the filter function initially
    filter();
});

// Set up event handlers for each checkbox
$w("#checkbox1").onChange(() => {
    debounceFilter();
});
$w("#checkbox2").onChange(() => {
    debounceFilter();
});
$w("#checkbox3").onChange(() => {
    debounceFilter();
});
$w("#checkbox4").onChange(() => {
    debounceFilter();
});
$w("#checkbox5").onChange(() => {
    debounceFilter();
});

// Set up event handler for min and max value inputs
$w("#minValueInput").onChange(debounceFilter);
$w("#maxValueInput").onChange(debounceFilter);

// Set up event handler for search bar input
$w("#searchbar").onKeyPress(() => {
    debounceFilter();
});

// Debounce filter function to prevent rapid consecutive calls
function debounceFilter() {
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }
    debounceTimer = setTimeout(filter, 300); // Adjust debounce time as needed
}

async function filter(options = {}) {
    console.log("Filtering data...");

    let selectedTagsString = ""; // Initialize an empty string to hold selected tags

    // Concatenate selected tags into a single string
    if ($w("#checkbox1").checked) selectedTagsString += "Coastal Home Plans ";
    if ($w("#checkbox2").checked) selectedTagsString += "Craftsman Home Plans ";
    if ($w("#checkbox3").checked) selectedTagsString += "Stephen Alexander Homes Plans ";
    if ($w("#checkbox4").checked) selectedTagsString += "Single Story Home Plans ";
    if ($w("#checkbox5").checked) selectedTagsString += "Townhouse Home Plans ";

    console.log("Selected tags string:", selectedTagsString);

    const minValue = Number($w("#minValueInput").value);
    const maxValue = Number($w("#maxValueInput").value);

    console.log("Min value:", minValue);
    console.log("Max value:", maxValue);

    // Build filter query
let filterQuery = wixData.query("Properties");

// Create an array to hold all the filter conditions
const filterConditions = [];

// Add filter criteria for dropdowns
const dropdownValues = [$w('#dropdown1').value, $w('#dropdown2').value, $w('#dropdown3').value];
dropdownValues.forEach(value => {
    if (value) {
        // Add condition to filterConditions array
        filterConditions.push(
            filterQuery.contains("bedrooms", value)
                .or(filterQuery.contains("bathrooms", value))
                .or(filterQuery.contains("levels", value))
        );
    }
});

// Combine all filter conditions with OR operator
if (filterConditions.length > 0) {
    filterQuery = filterConditions.reduce((prev, current) => prev.or(current));
}

// Add additional filter criteria for min and max values
if (minValue) {
    filterQuery = filterQuery.ge("squareFeet1", minValue);
}
if (maxValue) {
    filterQuery = filterQuery.le("squareFeet1", maxValue);
}

// Add search query filter
if (options.search) {
    filterQuery = filterQuery.contains("type", options.search)
        .or(filterQuery.contains("price", options.search))
        .or(filterQuery.contains("propertyName", options.search))
        .or(filterQuery.contains("about", options.search))
        .or(filterQuery.contains("sku", options.search))
        .or(filterQuery.contains("squareFeet", options.search));
}


    console.log("Filter query:", filterQuery);

    try {
        // Execute filter query
        const queryResult = await filterQuery.find();

        console.log("Query result:", queryResult);

        // Update repeater with filtered data
        $w('#repeaterresults').data = queryResult.items;

        // Display number of results
        const count = queryResult.totalCount;
        $w("#text152").text = count > 0 ? `${count} Results Found` : `No Results Found`;

        console.log("Filtering complete.");
    } catch (error) {
        console.error("Error filtering data:", error);
    }
}

[anthony]

@blairretnauer

        filterConditions.push(
            filterQuery.contains("bedrooms", value)
                .or(filterQuery.contains("bathrooms", value))
                .or(filterQuery.contains("levels", value))
        );

@blairretnauer

// Add additional filter criteria for min and max values
if (minValue) {
    filterQuery = filterQuery.ge("squareFeet1", minValue);
}
if (maxValue) {
    filterQuery = filterQuery.le("squareFeet1", maxValue);
}

// Add search query filter
if (options.search) {
    filterQuery = filterQuery.contains("type", options.search)
        .or(filterQuery.contains("price", options.search))
        .or(filterQuery.contains("propertyName", options.search))
        .or(filterQuery.contains("about", options.search))
        .or(filterQuery.contains("sku", options.search))
        .or(filterQuery.contains("squareFeet", options.search));
}

Since it’s a 429 error perhaps these queries is creating too many queries at once from the client? The first seems like it’s up to 10 queries (ie. 10 requests). Then the second one is 8 more requests by my account. Plus the fact that every 300ms or more a new chain of queries can be executed means there could be many more requests happening in rapid succession.

Does the error happen if only selecting a single field to query on in the UI?

One suggestion would be to add the .ors only if that particular field needs to be filtered on.

[blairretnauer]

@blairretnauer

bedrooms

I’m trying to figure out how to reduce the amount of queries. I just need 3 fields and a number between a min and max number to show automatically shown in a repeater on page load.

I’ve been playing around again with other options and tried to lower the number of queries by using wix-http-functions with a POST method. Still didn’t work either though so no progress their either.

Any code ideas on how to show the data in the repeater, that’s imported from another page, and shown in the repeater so that it doesn’t get the 429 error code and has less queries?

Still only get the 429 error code and no other errors in the logs and console. The log goes all the way through to the last console.logs and finishes.

Here is the URL I am working on: Website URL

Here is the current front end code:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

let debounceTimer;

(async () => {
    $w.onReady(async () => {
        // Extract URL parameters
        const urlParams = wixLocation.query;

        // Set dropdown and input values from URL parameters
        $w('#dropdown1').value = urlParams.bedrooms || "";
        $w('#dropdown2').value = urlParams.bathrooms || "";
        $w('#dropdown3').value = urlParams.levels || "";
        $w('#minValueInput').value = urlParams.minSquareFeet || "";
        $w('#maxValueInput').value = urlParams.maxSquareFeet || "";

        // Filter function
        await filter();
    });

    // Filter function
    async function filter() {
        console.log("Filtering data...");

        // Build filter query
        let filterQuery = wixData.query("Properties");

        // Add filter criteria for dropdowns
        const dropdownValues = [$w('#dropdown1').value, $w('#dropdown2').value, $w('#dropdown3').value];
        dropdownValues.forEach(value => {
            if (value) {
                filterQuery = filterQuery.contains("bedrooms", value)
                    .or(filterQuery.contains("bathrooms", value))
                    .or(filterQuery.contains("levels", value));
            }
        });

        // Add additional filter criteria for min and max values
        const minValue = Number($w("#minValueInput").value);
        const maxValue = Number($w("#maxValueInput").value);
        if (minValue && maxValue) {
            filterQuery = filterQuery.between("squareFeet1", minValue, maxValue);
        } else if (minValue) {
            filterQuery = filterQuery.ge("squareFeet1", minValue);
        } else if (maxValue) {
            filterQuery = filterQuery.le("squareFeet1", maxValue);
        }

        // Execute filter query
        try {
            const queryResult = await filterQuery.find();

            // Update repeater with filtered data
            $w('#repeaterresults').data = queryResult.items;

            // Display number of results
            const count = queryResult.totalCount;
            $w("#text152").text = count > 0 ? `${count} Results Found` : `No Results Found`;

            console.log("Filtering complete.");
        } catch (error) {
            console.error("Error filtering data:", error);
        }
    }

    // Set up event handlers for each checkbox
    $w("#checkbox1").onChange(() => {
        debounceFilter();
    });
    $w("#checkbox2").onChange(() => {
        debounceFilter();
    });
    $w("#checkbox3").onChange(() => {
        debounceFilter();
    });
    $w("#checkbox4").onChange(() => {
        debounceFilter();
    });
    $w("#checkbox5").onChange(() => {
        debounceFilter();
    });

    // Set up event handler for min and max value inputs
    $w("#minValueInput").onChange(debounceFilter);
    $w("#maxValueInput").onChange(debounceFilter);

    // Set up event handler for search bar input
    $w("#searchbar").onKeyPress(() => {
        debounceFilter();
    });

    // Debounce filter function to prevent rapid consecutive calls
    function debounceFilter() {
        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }
        debounceTimer = setTimeout(filter, 300); // Adjust debounce time as needed
    }

    // Make HTTP request to backend function
    try {
        const response = await fetch('/_functions/getData', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: {
                    bedrooms: Number($w('#dropdown1').value),
                    bathrooms: Number($w('#dropdown2').value),
                    levels: Number($w('#dropdown3').value),
                    minSquareFeet: Number($w('#minValueInput').value),
                    maxSquareFeet: Number($w('#maxValueInput').value)
                }
            })
        });

        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }

        const data = await response.json();
        // Process the data received from the backend
    } catch (error) {
        console.error('Error fetching data from backend:', error);
    }
})();

Current backend JavaScript:

import { ok, serverError } from 'wix-http-functions';
import wixData from 'wix-data';

export function getData(request) {
    const queryParams = request.query;
    const bedrooms = queryParams.bedrooms || null;
    const bathrooms = queryParams.bathrooms || null;
    const levels = queryParams.levels || null;
    const minSquareFeet = queryParams.minSquareFeet || null;
    const maxSquareFeet = queryParams.maxSquareFeet || null;
    const smallHomePlans = queryParams.smallHomePlans || false;
    const stephenAlexanderHomePlans = queryParams.stephenAlexanderHomePlans || false;
    const coastalHomePlans = queryParams.coastalHomePlans || false;
    const craftsmanHomePlans = queryParams.craftsmanHomePlans || false;
    const singleStoryHomePlans = queryParams.singleStoryHomePlans || false;
    const townhouseHomePlans = queryParams.townhouseHomePlans || false;
    const traditionalHomePlans = queryParams.traditionalHomePlans || false;
    const narrowLotHomePlans = queryParams.narrowLotHomePlans || false;
    const farmhouseHomePlans = queryParams.farmhouseHomePlans || false;
    const modernHomePlans = queryParams.modernHomePlans || false;
    const traditionalNeighborhoodDevelopmentHomePlans = queryParams.traditionalNeighborhoodDevelopmentHomePlans || false;

    let filterQuery = wixData.query("Properties");

    // Add filter criteria based on query parameters
    if (bedrooms) {
        filterQuery = filterQuery.contains("bedrooms", bedrooms);
    }
    if (bathrooms) {
        filterQuery = filterQuery.contains("bathrooms", bathrooms);
    }
    if (levels) {
        filterQuery = filterQuery.contains("levels", levels);
    }
    if (minSquareFeet) {
        filterQuery = filterQuery.ge("squareFeet1", minSquareFeet);
    }
    if (maxSquareFeet) {
        filterQuery = filterQuery.le("squareFeet1", maxSquareFeet);
    }

    // Example checkbox filters
    if (smallHomePlans) {
        filterQuery = filterQuery.eq("type", "Small Home Plans");
    }
    if (stephenAlexanderHomePlans) {
        filterQuery = filterQuery.eq("type", "Stephen Alexander Home Plans");
    }
    if (coastalHomePlans) {
        filterQuery = filterQuery.eq("type", "Coastal Home Plans");
    }
    if (craftsmanHomePlans) {
        filterQuery = filterQuery.eq("type", "Craftsman Home Plans");
    }
    if (singleStoryHomePlans) {
        filterQuery = filterQuery.eq("type", "Single Story Home Plans");
    }
    if (townhouseHomePlans) {
        filterQuery = filterQuery.eq("type", "Townhouse Home Plans");
    }
    if (traditionalHomePlans) {
        filterQuery = filterQuery.eq("type", "Traditional Home Plans");
    }
    if (narrowLotHomePlans) {
        filterQuery = filterQuery.eq("type", "Narrow Lot Home Plans");
    }
    if (farmhouseHomePlans) {
        filterQuery = filterQuery.eq("type", "Farmhouse Home Plans");
    }
    if (modernHomePlans) {
        filterQuery = filterQuery.eq("type", "Modern Home Plans");
    }
    if (traditionalNeighborhoodDevelopmentHomePlans) {
        filterQuery = filterQuery.eq("type", "Traditional Neighborhood Development Home Plans");
    }
    // Add other checkbox filters here...

    return filterQuery.find()
        .then((results) => {
            return ok({ body: JSON.stringify({ items: results.items }) });
        })
        .catch((error) => {
            console.error("Error filtering data:", error);
            return serverError();
        });
}

[Jorg_Blank]

May I ask if you have come to a solution?

I am also getting this error. I have already removed all the codes from my pages and still I keep getting the too many requests error. Very strange