Group Data by Value in Collection List?

Is it possible to automatically group different records in a collection list based upon a specified value?

For example, let’s say I have a number of courses, each belonging to a category. Can I set up the collection list to do something like this:

Category A
Course 1
Course 3
Course 5

Category B
Course 2
Course 4

If relevant, I am using Xano as my backend

1 Like

Hello @kyanaloe,

Yes, for sure. You could add a filter on your collection when you setup your collection or on the page when you bind the collection to your collection list.

Here’s a live office hour we did on how we created the WeWeb academy page.

It explains how we organized our data, fetched our list of lessons and courses in WeWeb, and filtered our list of lessons based on the course selected by the user.

In this case we’re using Airtable but the same logic would apply to Xano :slight_smile:

Here’s another live office hour we did, building a job board with WeWeb and Xano.

It explains how we filter through our list of jobs based on the job category selected by a user.

Does that help?

The videos have been very helpful! And the filtering capabilities of WeWeb are great and intuitive. I’ll rewatch the videos in case I missed the answer to my question. But I think the difference is that I want to Group dynamically. So I wouldn’t want to set up a few collection lists filtered by category. Rather, I am looking to have one collection list that can be grouped based on a dynamic value from the database.

I am setting up a multi tenant app, so some users might belong to an institution with 5 class categories, whereas another user’s institution might have 10 class categories, for example. So, I would need the grouping to be part of the repeating group.

Does that make sense?

I think I understand yes.

You would like to filter the data in the backend based on the user who is logged in your WeWeb app so that WeWeb only fetches the relevant information from Xano. Is that correct?

Yes, I do want to do that, and your videos have been great in helping me achieve that.

But the question is more about organizing the display. I suppose what I’m asking for is like an enhanced sort.

So, instead of it looking like this

Class 1 - Category A
Class 3 - Category A
Class 5 - Category A
Class 2 - Category B
Class 4 - Category B

It would have built-in headers like this:

Category A
Class 1
Class 3
Class 5

Category B
Class 2
Class 4

1 Like

@kyanaloe did you find a solution for this? I’m working on the same issue.

Also Looking for a solution to this!

To help add more context… In plain English the data query would be “Get a list of the items unique categories”

here is an example of how you can do this using a javscript expression.

const objects = [
  {
    name: 'Sarah',
    id: 1234,
    age: 27,
    gender: 'Non-binary'
  },
  {
    name: 'John',
    id: 5678,
    age: 42,
    gender: 'Transgender'
  },
  {
    name: 'Emily',
    id: 9012,
    age: 19,
    gender: 'Non-binary'
  },
  {
    name: 'Alex',
    id: 3456,
    age: 33,
    gender: 'Female'
  },
  {
    name: 'Rachel',
    id: 7890,
    age: 25,
    gender: 'Female'
  }
];

const objectsByGender = {};

objects.forEach(object => {
  if (!objectsByGender[object.gender]) {
    objectsByGender[object.gender] = [];
  }
  objectsByGender[object.gender].push(object);
});

console.log(objectsByGender);

Not sure if this is possible in WeWeb, but you could try nested collection lists. The parent list would be a list of categories, and the nested list would be classes for that particular category.

3 Likes

@InterviewKey is actually a really nice suggestion! It’s totally doable to have nested collection lists inside of each other :wink:

1 Like

Hey Quentin,

This sounds awesome! How would you go about doing this? In Bubble, there is the option to select “current cell’s _______” and I am trying to find the WeWeb equivalent. Would you do this through filters? What is the most efficient and best practice to fetch nested data?

-An example of this use case would be a repeating group aka collection list of Feed Posts with a nested collection list of comments and another nested list within that of comment replies.

Hi @adammiko :wave:

The approach will depend on what backend you’re using and how you structured your data in there.

For example, do you have a post table and a separate comment table or do you have a comment column inside the post table?

@Joyce Hi Joyce! I have a separate comment table and a separate post table and each comment has a related post and there is an optional section that can be blank for related comment, meaning, if a related comment is filled by a comment’s unique ID, that means it is a comment reply.

Most applicable scenarios in my app have a primary table that I would refer to almost as a data parent, and anything that would be a “child” of that parent (i.e. a comment would not exist without a post) is its own table with a RELATED field that references the parent.

The back end I am using is Xano.

Thank you so much.

Hi @adammiko :wave:

If you’re using Xano, you have two options:

  1. create one posts collection in WeWeb, and use Xano add-ons to send the posts + linked comments to WeWeb.

  2. create two collections in WeWeb (one for posts and one for comments), and use the lookup formula to display the comments data in a posts collection list. Here’s a video on how to use the lookup formula in that context.

Does that help?

Hi Joyce! Thank you for all your help on this. I wanted to inquire whether my Xano collection list that is being referenced in the lookup formula must be public or whether it would be private and have the lookup function still work?