Structure nested data for faceting

I have a great difficulty to structure my data and end up with the wanted outcome regarding faceting. This is an eshop where I have my products that are connected with some filters and every filter belongs to a parent group. Products have a N-N relationship with filters so each product can belong to N filters and each filter can belong only to 1 group.

In products list I need a left sidebar where I 'll present all filters grouped by using their parent groups:

– Group 1
---- Filter 11
---- Filter 12

– Group 2
----Filter 21
---- Filter 22

Filters will be checkboxes. So when the user makes a search then groups and filters will be filtered accordingly and then the user can check some filters and so on.

In my products indice each product has a key named “filters” which is an array of objects. Each object contains the filter’s “title” and the “group” this filter belongs to. Each “group” key is an object that has 2 keys which are the group “title” and an array of all children “filters” that belong to this group:

filters: [{
  title: 'filter 11',
  group: {
    title: 'Group 1',
    filters: [...],
  }
}, {
  title: 'filter 22',
  group: {
    title: 'Group 2',
    filters: [...],
  }
}]

I created a facet for “filters.group.title” and I 've managed to render with a loop all groups but it seems I cannot have access to the nested filters each group has in order to provide checkboxes to the end-user. I feel that the structure is probably ok but maybe I am missing sth from the docs. What do you think?

Hi there,
Thanks for reaching out to us.

If I understand correctly,

  • Group 1

    • Filter 11
    • Filter 12
  • Group 2

    • Filter 21
    • Filter 22

Does the following example make sense with the above?

  • Brand

    • Apple
    • Xiaomi
    • Samsung
    • HP
  • Category

    • Phone
    • Laptop
    • Desktop

If it’s correct, you can simply have brand and category attributes in your index, like

[
  {
    objectID: 'xxxxxx',
    brand: ['Xiaomi', 'Samsung'],
    category: ['Phone', 'Laptop']
  },
  {
    objectID: 'yyyyyy',
    ....
  },
]

I don’t know with what you are building your frontend, but with InstantSearch you can have that UX quite easily.

Check out the example above.

Please let me know how it goes with you or if I misunderstood some part.

Hey, thanks for getting back to me. We are using Vue InstantSearch.

Your example makes sense but there is one key difference. Each product is connected with different Filters and each Filter with one Group, so the Groups are not the same across all products. This means that we don’t have predictable Groups like “brand” or “category” for each record in the indice.

An example

– Cream Type
----Day
----Night
----24h

–Color
----Red
----Green
----Yellow

– Skin
----Normal
----Dry
----Oily

So a product might have colors and might not be connected with skin types etc As you see the Groups can vary across products. In your example, you are using “brand” as the “attribute” of the refinement list but I cannot actually do so since these are not the same for each product. Thoughts?

Hi there,

In these situations, we recommend changing the structure of your records for them to have the same attribute to filter on.

An example would be:

[
  {
    "name": "...",
    "cream_type": "Day",
    "skin": "Normal",
    "color": "Red"
  },
  {
    "name": "...",
    "cream_type": "Night",
    "skin": "Dry",
    "color": "Green"
  }
]

If we misunderstood your question, it would be helpful to reproduce what you currently have with your dataset in this Vue InstantSearch sandbox.

Hello, thanks for getting back to me. So the thing is that our products do not share the same attributes. Some of them might have “cream_type” and some others will have “color” and so on. Also “cream_type” will be probably an array and not a string. This means that attributes are not the same across all products and this is exactly the issue we are having to create the facets. Thoughts?