Number of filtered items

Hello, I try to figure out how to keep the number of filtered collection items in a variable so I can present this number to the user.
When checking the value of the total number of filtered items it shows 3 - this is the collection list formula.
When I try “All” it shows 6.

The same happens when I try to present this number outside of the collection list, it always shows the total length of the collection. Is there any workaround?

1 Like

Hi @Cichy,

There are two ways you could do this:
1- you could add the filter at collection level in the “Data” menu so that the length of array on the page would include only the filtered data. In that case, you would need to add a workflow action to refetch the collection on the page whenever a user filters data

2- you could get the length of your filtered array with a filterByKey formula wrapped inside a length formula like we did in the example below

In the example below, we filter an array of “jobs” that have “part-time” as the value in the “type” column:

As you can see, there is only 1 result on the page but the “jobs” array length is still 11 because we are applying the filter on the page, not at collection level int he data menu.

So in our filter, instead of binding to the length of the “jobs” array:

We need to bind to the length of the filtered “jobs” array based on the “type” key:

What the highlighted part of the formula is saying is:

  • send me back the length,
  • of the array of “jobs” that match the condition
  • in the column “type”, the value is “part-time”

If you hover over the filterByKey formula in the editor (or any other formula for that matter), you can see how it works:

Hello Joyce, thank you for such a rich explanation! I am not sure if it is my use case. I have two search fields - one for position and one for location and the list is dynamically filtered once the fields are filled:

So as far as I understand, I can use filterbyKey if had predetermined property to be recognized by this function. But in my case the user can type anything and list is refiltered on the fly.

This is the example of list when search fields are filled (only 2 positions visible)

Ha! Great point!

You should be able to apply a similar logic with the contains formula:
Screenshot 2022-04-04 at 12.59.07

In your case, the formula might get a bit complex since you have two search fields but it should be doable :slight_smile:

The idea is that you want to bind the “20 Results” text to a formula that filters through your array of jobs in the same way that your two search fields filter through your list of jobs.

Does that make sense?

If you’d like to share a link to your project, I can have a look as well :slight_smile:

Hello, I guess it makes sense, but I doubt I can do it … I need some kind of a loop to iterate over the whole collection and invoke “contains” on every collection item, count “Trues” and return the number? Maybe I should just share my project :slight_smile:
Is it ok to post a link to the workspace here?

Sure, go for it! :slight_smile:

I’ll take a look asap

Hi @Cichy! Just had a look but got stuck because the contains formula seems to look for an exact match (for example if the user searches for “Manager”, it wouldn’t return the “HR Manager” item).

I’m tapping into our dev teams knowledge to help us out :slight_smile:

Ok, with the filters set up as they are on the Collection List in the page, you could do it in Javascript but it’s not currently doable in no-code.

A no-code workaround you might try: apply the filters at Collection level and use a workflow to refetch the Collection on Change. It’s what we did to build the WeWeb Academy page.

Here’s a live Office Hour we did that explains why we did it that way and how :slight_smile:

Let me know if it helps!

Hello Joyce. It works :).

I performed kinda stress testing of this solution. Mocked about 5000 records in Xano and added two filter groups on Collection level (two search fields triggering refetching on change). No filtering on backend. And to my surprise, it is working quite acceptable (like 2-3 seconds delay). Not sure if I can go to PROD with such solution but just wanna express my appreciation to Weweb capabilities :slight_smile:

1 Like

Awesome! That’s great to hear :slight_smile: