Refinementlist Sorting Confusion

Open Q&A
,
#1

Hi, I’ve got the following data:

    "categorydata": [
        {
            "name": "Education",
            "color": "big-red",
            "order": 2
        },
        {
            "name": "Health Services",
            "color": "vitali-teal",
            "order": 4
        }
    ],

In the Algolia interface I’m able to select categorydata.name but not categorydata. If I enter it in manually I’m only getting a series of empty arrays. Ideally I’d like to use the sortBy parameter to order the categories by their order attribute. Is this not possible or should I configure the data differently? Thanks!

 instantsearch.widgets.refinementList({
  container: '#brand-list',
  attribute: 'categorydata',
  sortBy: ['order:asc'],
  transformItems: function(items) {
    console.log(items);
    return items.map(function(item) {
      return item;
    });
  },
  templates: {
    item: `
    <li data-refine-value="{{value}}" class="ais-RefinementList-label">
      <input type="checkbox" value="{{value}}" class="ais-RefinementList-checkbox" {{#isRefined}}checked{{/isRefined}} />
      <a href="{{url}}">{{label}} <span class="ais-RefinementList-count">({{count}})</span><pre>{{value}}</pre></a>
    </li>
  `,
  },
}),
#2

Hey there!

The sortBy attribute for refinementLists only accepts one of the following string values:

  • "count:asc"
  • "count:desc"
  • "name:asc"
  • "name:desc"
  • "isRefined"

If you want to sort on another attribute, you can pass a function that compares two entries (like Array.sort). If you change your code to something like this, it should work:

instantsearch.widgets.refinementList({
  // Other code

  sortBy: function(a, b) {
    if (a.order < b.order) { return -1; }
    if (a.order > b.order) { return 1; }

    return 0; // order attribute is the same
  },

 // Other code
});

Hope this helps, cheers!