0

I'm building a sorting system using checkbox to filter some businesses. I did found an awesome answer here.

The problem is, it's using only a single element. In my case i want to filter by business category and some of them can have up to 3 categories. So I'm kind of stuck in there because i don't know how to proced to get the unique arrays and then to apply the filter.

In my case what i need is:

  • Get the business list from database;
  • Create an array with all the unique category taken from each business;
  • Create an checkbox list with these unique categories;
  • When select one checkbox, show all the business within that selected category.

Here is a simple fiddle of the working version: http://jsfiddle.net/zo47y6es/1/
It only has 1 option per category;

Here is a fiddle with the list i want to make work: http://jsfiddle.net/zo47y6es/2/
Which is an list of category for each business.

This is the code i made (simple version) based on the answer from that topic:

app.js

//Loop and create unique items for checkbox
var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

//Default array. Comes from the page where we select the checkbox
$scope.useCategory = {};

$scope.$watch(function () {
    return {
        business: $scope.business,
        useCategory: $scope.useCategory
    }
}, function (value) {
    var selected;

    //Update filter couting
    $scope.count = function (prop, value) {
        return function (el) {
            return el[prop] == value;
        };
    };

    //Unique items to create filter in the page
    $scope.categoryGroup = uniqueItems2($scope.business);

    //Execute the filter process in the category
    var filterAfterCheck = [];
    selected = false;
    for (var j in $scope.business) {
        var p = $scope.business[j];
        for (var i in $scope.useCategory) {
            if ($scope.useCategory[i]) {
                selected = true;
                if (i == p.categoria) {
                    filterAfterCheck.push(p);
                    break;
                }
            }
        }
    }
    if (!selected) {
        filterAfterCheck = $scope.business;
    }

    $scope.filteredBusiness = filterAfterCheck;
}, true);

I started trying to play with it but i already got some errors in the uniqueItems process and couldn't go further.

var uniqueItems2 = function (data) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i].category;
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

And my array looks like this:

$scope.business = [
    {
        "id":1,
        "name":"aaa 001",
        "category":[
            "Food",
            "Market"
        ],
        "rating":"99%",
        "open":"O"
    },
    {
        "id":2,
        "name":"aaa 002",
        "category":[
            "Clothes",
            "Shoes",
            "Dress"
        ],
        "rating":"99%",
        "open":"O"
    },
    {
        "id":1,
        "name":"aaa 001",
        "category":[
            "Market",
            "Other"
        ],
        "rating":"99%",
        "open":"O"
    }
]

Does anyone knows how should i procced to achieve this result? I need to filter the business based on the category eventought they may have multiple categories (in my case, up to 5 per business).

Community
  • 1
  • 1
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • what are the filter criteria ... match all selected categories or just any selected category? Provide a starting demo that shows basic UI for this. Should be a fairly simple custom filter to create – charlietfl Oct 20 '15 at 13:34
  • @charlietfl This fiddle shows the system working: jsfiddle.net/rzgWr/19 But each person only has a single t-shirt size. In my case they would have up to 5 t-shirts size. Which would be the business category. Each business can have up to 5 category. So if i click on the Market category, each business within that category would be show. I Also updated my question. Is it better? – celsomtrindade Oct 20 '15 at 13:49
  • not interested in reworking that demo that has far too much code in it for what is needed. Create your own minimal example – charlietfl Oct 20 '15 at 13:49
  • @charlietfl i updated my question. There is 2 fiddle. 1 is with the simple version working. The other is this one: http://jsfiddle.net/zo47y6es/2/ Which already has the list of array i need to make work. Thanks! – celsomtrindade Oct 20 '15 at 14:38
  • so what is the filter criteria? – charlietfl Oct 20 '15 at 14:40
  • When i select the checkbox, at least one of the businness category must match the checkbox selected. For example, if i select the checkbox "Food", if the business has `category: ['food', 'wine', 'market']` it must appear on the list. – celsomtrindade Oct 20 '15 at 14:55
  • and if more than one checkbox selected? – charlietfl Oct 20 '15 at 14:58
  • Samething, It will show all the business that has that specific category in its list of categories. – celsomtrindade Oct 20 '15 at 15:21
  • still not clear... show any or only show ones that are match within all selections? – charlietfl Oct 20 '15 at 16:12
  • No.. Se the first fiddle i provide in the question. If no checkbox is selected, then all of the business are show. If i select the checkbox 'FOOD' all the business that have this category will be show, doesn't matter if it has other categories, like this: ['food', 'wine', 'market']. As long as it has 'food' it will show and the others will be hide. If i select `Food` and `Sports` then it will show business within those categories. The first fiddle show it working, expect it only works with 1 single category and i need to work with multiple categories. – celsomtrindade Oct 20 '15 at 16:22
  • Try this http://plnkr.co/edit/YSv75kOfUgzQh7wlCquA?p=preview . Second demo of yours is still confusing – charlietfl Oct 20 '15 at 17:13
  • I didn't tested whitin my app. But i think this is it! Can you make it an answer? – celsomtrindade Oct 20 '15 at 17:33

0 Answers0