angular js filter for search functionality

Question

How can I use AngularJS filter for search functionality using this json structure?

$scope.jsonObj = {
    idNo1: {
       name: "Diljish",
       age: 24
    },
    idNo2: {
       name: "Shemeem",
       age: 28
    }
}

how do you want this to be filtered?

vistajess
– vistajess

2016-11-25 12:16:38 +00:00
Commented Nov 25, 2016 at 12:16 — vistajess
– vistajess, Commented Nov 25, 2016 at 12:16
Depending on name

user6044627
– user6044627

2016-11-25 12:18:33 +00:00
Commented Nov 25, 2016 at 12:18 — user6044627
– user6044627, Commented Nov 25, 2016 at 12:18

StepUp · Accepted Answer · 2016-11-25 13:07:13Z

2

No JavaScript code is required.

You should create input for data to filter:

Filter: <input type="text" ng-model="yourFilter.name"/>

Then, in ng-repeat:

<table>
  <tr>
      <th>Name</th>
      <th>Age</th>
  </tr>
  <tr ng-repeat="person in persons | filter:yourFilter | orderBy:'name'">
     <td>{{ person.name | uppercase}}</td>
     <td>{{ person.age | lowercase}}</td>
   </tr>
</table>

Where persons is your json object.

(function()
{        
    var yourController=function($scope) { 
             $scope.persons= [];

             function init() {
                $scope.persons={
                       idNo1: {
                            name: "Diljish",
                            age: 24
                       },
                       idNo2: {
                            name: "Shemeem",
                            age: 28
                   }}
             }        
             init();
    };    


    yourController.$inject=['$scope'];   

    angular.module('yourApp').controller('yourController',         
                                                yourController);

}());

Update:

It remains the same, if you use another json object:

<body ng-init="people=[{ name:'Shemmem' }, { name:'Diljish' }]">
    Filter: <input type="text" ng-model="yourFilter.name"/>
    <table>
        <tr>
            <td>Name</td>
            <td>City</td>
        </tr>
        <tr ng-repeat="person in people | filter:yourFilter">
            <td>{{ person.name }}</td>
            <td>{{ person.city }}</td>
        </tr>
    </table>
</body>

edited Nov 25, 2016 at 13:07

answered Nov 25, 2016 at 12:44

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

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

2 Comments

user6044627 Over a year ago

<body> <div id="content" ng-controller="MainCtrl"> <input type='text' ng-model='searchText' placeholder="Search a name like : Soheil or something " /> <ul> <li ng-repeat='person in people | filter:searchText'> {{person.name}} </li> </ul> </div> using json $scope.people = [ { name:'Shemmem' }, { name:'Diljish' } ] But in my question json is different

StepUp Over a year ago

@Diljish please, see my updated section in an answer.

TRDrake · Accepted Answer · 2016-11-25 12:24:50Z

1

If you want to filter it in a ng-repeat you can use a filter with a pipe "|":

<div ng-repeat="person in people | filter: customFilter">
 </div>

Then, in the controller you define the customFilter:

                $scope.customfilter = function (person) {
                    return (person.name == $scope.nameToBeFiltered)}

where "nameToBeFiltered" is the name you want to filter (you can ng-model that scope variable to an input in the view).

Now, if you want to filter somewhere else, maybe you are looking for a "Javascript: Find value in Json" rather than AngularJS.

answered Nov 25, 2016 at 12:24

TRDrake

2122 gold badges4 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:30:32Z

0

Check out these:

Similar question: ng-repeat :filter by single field

Documentation: https://docs.angularjs.org/api/ng/filter/filter

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 25, 2016 at 12:29

The JD

1312 bronze badges

Comments

J-Mean · Accepted Answer · 2016-11-25 17:21:07Z

Please find working code.

Had filter for "name"

(function(angular) {
  'use strict';
angular.module('app', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.filtertext="";
    $scope.jsonObj = {
    idNo1: {
       name: "Diljish",
       age: 24
    },
    idNo2: {
       name: "Shemeem",
       age: 28
    }
}
    
    $scope.filterByName = function(items,filtertext) {
    var result = {};
    angular.forEach(items, function(value, key) {
     
        if  (value.name.toLowerCase().indexOf(filtertext) > -1) {
            result[key] = value;
        }
    });
    return result;
    }
    
    
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
  
</head>
<body ng-app="app">
  <div ng-controller="ExampleController">
  <input type="text" ng-model="filtertext"/>
  <hr>
 <div ng-repeat="(k,v) in filterByName(jsonObj,filtertext)">
    {{k}} {{v.name}}
</div>
    
</div>
</body>
</html>

Collectives™ on Stack Overflow

angular js filter for search functionality

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related