Empty results for front-end filtering

Ask us anything How do I?
1

I have a search with autocomplete input. I use it’s value to search through a collection by using weweb’s own ‘frontend’ filters. Now I have a text element for when the filtered collection results are empty, however how can I bind its display condition to that filtered result?

Screenshot 2025-10-06 at 16.12.50
Screenshot 2025-10-06 at 16.12.50878×1590 51.2 KB

2

Hey, Niels

Probably not the answer your looking for, but I usually do this with AI, cause its simpler.
Either in ChatGPT, (or your preferred LLM) or try WeWeb AI.

3

Thanks Karl,

Problem is you can’t really reference these filtered results in weweb’s AI. Only the non-filtered object which stays the same while using front-end filters. (Plus since the last update I haven’t been able to get 1 good formula out of the AI anymore)

4

You want to do this in Javascript. I don’t know your filters but something like this:

const userGear = context.component?.variables?.['YOUR_WEWEB_VARIABLE_ID'] || [];

// Example: filter only active gear
const filtered = userGear.filter(item => item.status === 'active');

// Return true/false if filtered length is more than 0
return filtered.length > 0;
5

Hi Karl, I appreciate the help!
So for one of the filters (‘active’ indeed) that’s a static filter. My challenge lies in the search input which is a dynamic filter. I guess that would still work with your javascript (?).

Screenshot 2025-10-07 at 11.09.40
Screenshot 2025-10-07 at 11.09.403060×1262 386 KB

6

Yes that would work. So for an LLM (Chat GPT or any you prefer), i would paste something like this and see what it gives you. It’s a bit hard when i don’t know the details, but maybe you’ll get it.

const userGear = context.component?.variables?.['YOUR_WEWEB_VARIABLE_ID'] || [];
const sizeVar = [YOUR SIZE VARIABLE]
const productVar = [YOUR PRODUCT VARIABLE]

I want to return true or false. userGear is an array. Filter userGear by userGear.status == active. AND (userGear.size contains sizeVar OR userGear.product_item contains productVar). If the result length is 0, return false, else return true.

It should spit out some code. Here’s what i got with my dummy. If you input the correct variables, it will give you the code with the correct variables.

const userGear = context.component?.variables?.['YOUR_WEWEB_VARIABLE_ID'] || [];
const sizeVar = context.component?.variables?.['YOUR_SIZE_VARIABLE_ID'];
const productVar = context.component?.variables?.['YOUR_PRODUCT_VARIABLE_ID'];

const filtered = userGear.filter(g =>
  g.status === 'active' &&
  (
    (Array.isArray(g.size) ? g.size.includes(sizeVar) : g.size === sizeVar) ||
    (Array.isArray(g.product_item) ? g.product_item.includes(productVar) : g.product_item === productVar)
  )
);

return filtered.length > 0;