Filter JSON data on init

Question

This is my JSON object:

{
Stores: [
{
    Name: "Store #1",
    DealerType: "Office"
},
{
    Name: "Store #2",
    DealerType: "Office"
},
{
    Name: "Store #3",
    DealerType: "Office"
},
{
    Name: "Store #4",
    DealerType: "Headquater"
},
]
}

This is my view:

<select id="dealerType">
     <option value="">All</option>
     <option value="Office">Office</option>
     <option value="Headquater">Headquaters</option>
</select>
<ul>
    <li ng-repeat="store in stores | filter:dealerType">{{store.Name}}</li>
</ul>

I want to only show the one store with DealerType: "Headquater" on pageload and still be able to use the filter functionality from the <select>-element

I have tried to change the ng-repeat to: ng-repeat="store in stores | filter:{DealerType: 'Headquater'} | filter:dealerType". This does filter by the DealerType, but will not be changed when I update the "dealerType" select.

You would need to set an ng-model for the select to be able to set it's selection as a filter. Also a typo in `Stores` casing issue. http://plnkr.co/edit/vQz9Y1?p=preview — PSL, Oct 07 '14 at 13:54
possible duplicate of [Angular filter exactly on object key](http://stackoverflow.com/questions/20292638/angular-filter-exactly-on-object-key) — Scotty.NET, Oct 09 '14 at 17:42

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Two things:

Use ng-model

Make sure you set the select to be part of the model,

<select ng-model="dealerType">...</select>

Filter expression

Use the appropriate filter expression to target your property to the model defined above.

<li ng-repeat="store in stores | filter:{'DealerType': dealerType}:true">{{store.Name}}</li>

Check out this similar answer.

And here is a working plunk.

edited May 23 '17 at 11:49

Community

1
1

answered Oct 07 '14 at 13:57

Scotty.NET

12,533
4
42
51

score 0 · Accepted Answer · answered Oct 07 '14 at 13:57

http://jsbin.com/fuwaki/1/edit

<div ng-app="app">
    <div ng-controller="fCtrl">
      <select id="dealerType" ng-model="dealerType">
     <option value="">All</option>
     <option value="Office">Office</option>
     <option value="Headquater">Headquaters</option>
</select>
<ul>
    <li ng-repeat="store in stores | filter:dealerType">{{store.Name}}  | {{store.DealerType}}</li>
</ul>
    </div>
    </div>


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

app.controller('fCtrl', function($scope){

   $scope.stores= [{
     Name: "Store #1",
     DealerType: "Office"
 }, {
     Name: "Store #2",
     DealerType: "Office"
 }, {
     Name: "Store #3",
     DealerType: "Office"
 }, {
     Name: "Store #4",
     DealerType: "Headquater"
 } ];

$scope.dealerType = 'Headquater'
});

That did it!All I had to do, was add `$scope.dealerType = "Headquater"` to my excisting code, and it worked. — stffn, Oct 08 '14 at 09:23

Filter JSON data on init

2 Answers2

Two things:

Use ng-model

Filter expression