Sorting Product Filters in AngularJS E-shop

Ecom
1

I’m stuck with a tricky issue in my AngularJS online store project. The product filters on category pages are acting up.

Here’s what’s happening:

MAKE
Make X
Make Y
Make Z

COLOR
Blue
Orange
White

GROWTH PERIOD
6 weeks
11 weeks
13 weeks

I want to sort each filter group alphabetically. But when I use orderBy for the Make filter, it messes up the other filters too.

For example, if Item1 is Make X and Color Orange, and Item2 is Make Y and Color Blue, the Make filter looks fine (X then Y). But the Color filter gets weird, showing Orange before Blue because Make X is always on top.

The sorting is based on the products, not the actual filter options. Any ideas on how to fix this? I’m totally stumped!

UPDATE: Here’s some code

This loops through filter types and products:

<div ng-repeat=\"(filterType, filterList) in filterOptions\" class=\"filter-group\">
  <h4>{{ filterType }}</h4>
  <ul>
    <li ng-repeat=\"option in filterList\">
      <label>
        <input type=\"checkbox\" ng-click=\"updateFilters(filterType, option)\">
        {{ option }}
      </label>
    </li>
  </ul>
</div>

The controller is huge, so I’m not sure which parts to show. Any help would be awesome!

2

I’ve encountered a similar issue in my projects. One approach that worked for me was to create a separate data structure for the filter options, independent of the product data. This allows you to sort each filter group individually without affecting the others.

Here’s a basic implementation:

$scope.filterOptions = {
  MAKE: ['Make X', 'Make Y', 'Make Z'].sort(),
  COLOR: ['Blue', 'Orange', 'White'].sort(),
  'GROWTH PERIOD': ['6 weeks', '11 weeks', '13 weeks'].sort()
};

Then modify your HTML to use this structure:

<div ng-repeat="(filterType, options) in filterOptions" class="filter-group">
  <h4>{{ filterType }}</h4>
  <ul>
    <li ng-repeat="option in options">
      <label>
        <input type="checkbox" ng-click="updateFilters(filterType, option)">
        {{ option }}
      </label>
    </li>
  </ul>
</div>

This keeps your filter options sorted alphabetically while maintaining the original product data structure. You might need to adjust your filter logic slightly, but it should solve the sorting issue.

3

Hey Liam_Stardust, that’s a super interesting problem you’ve got there! I’ve actually run into something similar before, and it can be a real head-scratcher.

Have you considered decoupling the filter options from the product data? That might help solve your sorting issues. What if you created separate arrays for each filter type, like:

$scope.makeOptions = ['Make X', 'Make Y', 'Make Z'].sort();
$scope.colorOptions = ['Blue', 'Orange', 'White'].sort();
$scope.growthPeriodOptions = ['6 weeks', '11 weeks', '13 weeks'].sort();

Then in your HTML, you could loop through these pre-sorted arrays instead of deriving them from the products. Something like:

<div class="filter-group">
  <h4>MAKE</h4>
  <ul>
    <li ng-repeat="option in makeOptions">
      <!-- checkbox stuff here -->
    </li>
  </ul>
</div>

What do you think about that approach? It might require a bit of refactoring, but it could give you more control over how each filter group is displayed. Have you tried anything like this yet?

4

hav u considered using a custom sorting function? u could create a function that sorts each filter group independently. somethin like:

function sortFilters(filters) {
  for (let key in filters) {
    filters[key].sort((a, b) => a.localeCompare(b));
  }
  return filters;
}

then apply it to ur filterOptions before displaying. This way, each group gets sorted on its own, without affecting others. might solve ur issue without major changes to ur existing code.