I want to expand data that is structured like X-X where the X's are variable, this will be used for filtering

Ask for Help
1

Hey everyone - I hope you’re all well :slight_smile:

I’m trying to create a filter where the user can filter by the range of players suitable for boardgames. The current dataset I receive is set like this;

3-8
5-6
2-10
1-99

What I want to be able to filter by is any of the numbers between the 2 ranges so that when a user searches for a number they are included within the filter results.

e.g 2-10 would be applicable for any filters where 2,3,4,5,6,7,8,9,10 are selected.

I hope that’s enough information.

2

You could use a JavaScript column:

const min = Number(p1.split('-')[0]);
const max = Number(p1.split('-')[1]);
if (p2>=min && p2 <= max) {
  return true;
}

CleanShot 2024-09-19 at 22.02.46@2x
CleanShot 2024-09-19 at 22.02.46@2x1232×864 61 KB

1 Like
3

Does this work for In-App filtering?

4

Yes, you could add the JavaScript column as an in-app filter.

1 Like
5

Ah ok cool! I’m struggling to use the data for filtering. I can’t seem to get it to work, Are you able to show me how it would be implemented?

6

Well, the thing is, I’m not sure that it makes much sense to use it with an in-app filter. And in fact the only way to do that would be to combine the in-app filter with a custom filter. This is because in order to process all rows with the JavaScript column you would first need to capture some user input (a number, for example) in a user specific column, and then apply that to all rows and feed it into the JavaScript column.

Let me ask you a question: how do you envisage the ideal user experience? What would they see, and how would they interact with it?

7

It was basically so the user can select the number of recommended players for a board game and filter the collection.

The issue is that I only have data stored as player count : 2-7 which doesn’t include 3,4,5,6 within that data.

8

So you would want them to select a number from a list?
Or just enter a number?

9

I’m using the in-app filter component for the other filter options so I’d assume it would be using a similar pattern (selecting from list) I’m not sure if it can include text entry in that way.

10

Alright, try this:

  • Use a modified version of the JavaScript that I gave you as follows:
const min = Number(p1.split('-')[0]);
const max = Number(p1.split('-')[1]);
const arr = [];
for (let i = min; i <= max; i++) {
  arr.push(i);
}
return arr.join(',');
  • You should pass the Player Ranges column as p1. The column will return a list of all numbers in the range.
  • Add a Split Text column, and target it at the JavaScript column. This will create an array from the Joined List.
  • Use the Split Text column as an In-App filter
2 Likes