CODEWITHSUNDEEP
angularjs
Joseph
Joseph

Reputation: 733

Angularjs Filter Json Data

I have a factory in angular that will retrieve all data from the database as JSON data as below.

[{"part_no":"aaa","descr":"aaa123"},{"part_no":"bbb","descr":"bbb123"},{"part_no":"ccc","descr":"ccc123"},{"part_no":"ddd","descr":"ddd123"}]

How can i just filter, lets say the record with part_no : aaa and descr:aaa123 only?

maybe something like $scope.data = data | filter:part_no:aaa;

Upvotes: 1

Views: 3682

Answers (1)

fikkatra
fikkatra

Reputation: 5792

Here's an example of how to filter both within JavaScript and within the view:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  $scope.data = [{"part_no":"aaa","descr":"aaa123"},{"part_no":"bbb","descr":"bbb123"},{"part_no":"ccc","descr":"ccc123"},{"part_no":"ddd","descr":"ddd123"}];

  $scope.filteredData = $scope.data.filter(function(d) {
    return d.part_no === 'aaa' && d.descr === 'aaa123'
  });

});
.section {
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <div class="section">
    <h3>unfiltered data:</h3>
    <div ng-repeat="item in data">Part: {{item.part_no}}, Description: {{item.descr}}</div>
  </div>
  <div class="section">
    <h3>pre-filtered data in JavaScript:</h3>
    <div ng-repeat="item in filteredData">Part: {{item.part_no}}, Description: {{item.descr}}</div>
  </div>
  <div class="section">
    <h3>filtered data in view:</h3>
    <input ng-model="partFilter" placeholder="part filter" />
    <input ng-model="descrFilter" placeholder="description filter" />
    <div ng-repeat="item in data | filter:{part_no: partFilter, descr: descrFilter}">Part: {{item.part_no}}, Description: {{item.descr}}</div>
  </div>
</div>

Upvotes: 1

Related Questions