Angular query search for all array objects

Question

I am new to Angular and I need your help writing a custom filter where I can search through all array objects and get my matching results that would ignore period(.) and commas(,). For example, if I type "ashton," I should get "stash" and "ashton marton". But I am at a loss and need some advice. Here's what I have so far.

In my angularSearch.html I have this.

<!DOCTYPE html>
<html>
<head>
    <script src="js/angular.js"></script>x
    <title></title>
</head>
<body ng-app="storeSearch">
<div ng-controller="searchController">
    <label>Search: </label>
    <input type="text" class="search" ng-model="searchString" placeholder="Search"/>
<table>
    <tr ng-repeat="p in products | searchFilter: searchString">
        <td>{{p.product_code}}</td>
        <td>{{p.subname}}</td>
        <td>{{p.description}}</td>
    </tr>
</table>
</div>
<script src="app/app.js"></script>
</body>
</html>

My app.js is shown below.

var app = angular.module("storeSearch", []);

app.controller("searchController", ["$scope", function($scope){
    $scope.products = [
        {
            product_title: "A-2368",           
            description:"Asthon Martin",
            sub_name:"2000 model ashton martin"
        },
        {
            product_title:"S-2310",           
            description:"Stash of money",
            sub_name:"Rolls Royce"
        },
        {
            product_title:"h-2369",           
            description:"Honda Civic 2003",
            sub_name:"Marton Ashton, Honda Series"
        }
    ];

}]);

app.filter('searchFilter', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(products){
            if(products.value.toLowerCase().indexOf(searchString) !== -1){
                result.push(products);
            }
        });
        return result;
    };
});

What is the problem? What is your expected output if you type ashton? — Shaohao
– Shaohao, Commented Dec 14, 2015 at 19:52
@ShaohaoLin yeah, but "ashton" should be pulled from product_title, description and sub_name. I want the search to look in all places and not just "description". — missgg
– missgg, Commented Dec 14, 2015 at 20:35

Guido Kitzing · Accepted Answer · 2015-12-22 16:44:35Z

3

One thing you need to change in order to have your filter working, is this:

products.value.toLowerCase().indexOf(searchString)

value is not a property of your array, so try changing that to:

products.description.toLowerCase().indexOf(searchString)

This will compare the property description. Now you can implement the details. Your version is causing an error in the console, because products.value is undefined and you try to call toLowerCase() on undefined. My suggestion will fix that.

Update:

If you like to run over all your properties, you can try to extend your loop like this:

angular.forEach(arr, function(products) {
    for (var property in products) {
        if (products.hasOwnProperty(property)) {
            if (products[property].toLowerCase().indexOf(searchString) !== -1) {
                result.push(products);
                break;
            }
        }
    }
});

Update 2

According to your comment you want to modify the comparison of the properties a little, I guess you would also like to choose the properties that you actually want to compare to.

app.filter('searchFilter', function() {
    return function(arr, searchString) {
        var result, property, activePropertyList;

        activePropertyList = ['description', 'product_title', 'sub_name'];
        result = [];

        function isPartofSearchString(propVal, searchString) {
            propVal = propVal.replace(/\W+/g, '').toLowerCase();

            return propVal.indexOf(searchString) !== -1;
        }

        if (!searchString) {
            return arr;
        }

        searchString = searchString.toLowerCase();

        angular.forEach(arr, function(products) {
            for (property in activePropertyList) {
                if (isPartofSearchString(products[property], searchString)) {
                    result.push(products);
                    break;
                }
            }
        });

        return result;
    };
});

Function isPartofSearchString() substitues your critera (this makes things a little cleaner). activePropertyList[] defines the names of all properties, that you want to compare with. Since you have a || expression, it is sufficient, if one property matches your criteria -> hence the break to make it more efficient.

I know, there is still room for improvement here: e.g. you could move parts of your filter to the controller (the comparison function and the definition of the active properties), but I wanted to keep your code in the filter for this example.

Hope that helps.

edited Dec 22, 2015 at 16:44

answered Dec 14, 2015 at 19:55

Guido Kitzing

8925 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

missgg Over a year ago

Hi, but I don't just want to search for the description. I want to search for all array values including the product_title and sub_name. If i have 10 values in my array, I want to search for all values within my array. How would I write this?

WOUNDEDStevenJones Over a year ago

So then you'll use

(products.descipription.toLowerCase... !== -1) || (products.product_title.toLowerCase... !== -1) || (products.sub_name.toLowerCase... !== -1)

missgg Over a year ago

@WOUNDEDStevenJones thanks for the feedback but if I had 20+ objects I don't want to list all of them in that way. I actually have 15 objects for my real code project so I wanted a better way to code without listing all the objects keys with || sign.

Guido Kitzing Over a year ago

You can try to loop over your properties. I updated by answer to suggest an example.

missgg Over a year ago

Good answer! Thanks @GuidoKitzing!

|

Bata · Accepted Answer · 2015-12-14 20:16:39Z

0

app.filter('searchFilter', function(){
    return function(arr, searchString){
        var stripped = searchString.replace(',', '').replace('.', '').toLowerCase();
        return arr.filter(function(member) {
            return member.description.indexOf(stripped) > -1;
        });
    };
});

edited Dec 14, 2015 at 20:16

answered Dec 14, 2015 at 20:08

Bata

6513 silver badges7 bronze badges

1 Comment

missgg Over a year ago

Hi there, thanks for the comment. But I need to search within all values of my array object and not just "description". How do I make it so that it searches for any matching search input?

Collectives™ on Stack Overflow

Angular query search for all array objects

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related