Filter data from JSON file by a specific value using angularjs

Question

Currently I have a JSON file look like this:

[
  {
    "name":"Bánh bao nướng phô mai thịt",
    "image":"banhbaonuongphomaithit",
    "howtocook":"<h1>abc<\/h1>",
    "video":"sY6bswxfVGM",
    "category": "bakery"
  },
  {
    "name":"Cháo móng giò hạt sen",
    "image":"chaomonggiohatsen",
    "howtocook":"Sample",
    "video":"24vqCAXlQ0w",
    "category": "appetizer"
  },
  {
    "name":"Bánh mì chà bông nhân trứng muối",
    "image":"banhmichabongnhantrungmuoi",
    "howtocook":"Sample",
    "video":"HhMj6jDIQrY",
    "category": "bakery"
  },
  {
    "name":"Cà chua muối kiểu kim chi",
    "image":"cachuamuoikieukimchi",
    "howtocook":"Sample",
    "video":"aOYlyEiV3HQ",
    "category": "appetizer"
  }
 ]

This is my JS

var pageControllers = angular.module('pageControllers', [])
.config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects or libraries.
  $sceProvider.enabled(false);
});
;

pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/foods.json').success(function(data) {
    $scope.games = data;
  });
}]);

And HTML

<div class="row"> <!--First row-->
  <div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat = "item in games | filter: query">
   <a href="#/details/{{games.indexOf(item)}}" class="thumbnail" data-toggle="tooltip" data-placement="bottom" title="{{item.name}}"><img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}"></a>
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-controller = "UploadController" ng-show = "currentUser" ng-controller = "RegistrationController">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'"  value="{{item.name}}" >
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div><!--End of first row-->
</div>

And I want to display every records filter by category, for example when I filter appetizer or making it in a category page, all records that have appetizer category should displayed. I've though about reorganize the JSON file but still do not know how to filter it.

Add OrderBy to ng-repeat = "item in games | filter: query | orderBy : 'Category'" — Sajal
– Sajal, Commented Aug 31, 2017 at 9:43
@lin I figured out the solution by adding filter: {category:'bakery'} into the ng-repeat — Jay
– Jay, Commented Sep 1, 2017 at 5:43

Sajeetharan · Accepted Answer · 2017-08-31 09:37:20Z

1

You should use .then and access data property

pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
  $http.get('foods.json').then(function(data) {
    $scope.games = data.data;
  });
}]);

DEMO

answered Aug 31, 2017 at 9:37

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

lin Over a year ago

Cheers m8, doesn't he want to filter/order the data in a correct way? This just seem to fix the HTTP-Request.

Sajeetharan Over a year ago

@lin I assume if he has the correct filter in place it should work

lin Over a year ago

I don't think so -> I've though about reorganize the JSON file but still do not know how to filter it.

Jay Over a year ago

i'm using angular version 1.4.5 and the syntax was success. Using version 1.4.5 is because of the school tutorial using it.

Sajal · Accepted Answer · 2017-08-31 09:49:39Z

Add a search box to filter results by a property say 'category' as :

<input type="text" ng-model="query.category" placeholder="Search by category"/>

In this, the ng-model="query.category" would filter the ng-repeat="item in games | filter: query " on the category type

DEMO

angular.module('pageControllers', []).controller('HomeController', ['$scope', function($scope) {
  $scope.games = [{
      "name": "Bánh bao nướng phô mai thịt",
      "image": "banhbaonuongphomaithit",
      "howtocook": "<h1>abc<\/h1>",
      "video": "sY6bswxfVGM",
      "category": "bakery"
    },
    {
      "name": "Cháo móng giò hạt sen",
      "image": "chaomonggiohatsen",
      "howtocook": "Sample",
      "video": "24vqCAXlQ0w",
      "category": "appetizer"
    },
    {
      "name": "Bánh mì chà bông nhân trứng muối",
      "image": "banhmichabongnhantrungmuoi",
      "howtocook": "Sample",
      "video": "HhMj6jDIQrY",
      "category": "bakery"
    },
    {
      "name": "Cà chua muối kiểu kim chi",
      "image": "cachuamuoikieukimchi",
      "howtocook": "Sample",
      "video": "aOYlyEiV3HQ",
      "category": "appetizer"
    }
  ]
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="row" ng-app="pageControllers" ng-controller="HomeController">
  <!--First row-->
  
  <input type="text" ng-model="query.category" placeholder="Search by category"/>
  <br> <br> <br>
  <div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat="item in games | filter: query ">
    <a href="#/details/{{games.indexOf(item)}}" class="thumbnail" data-toggle="tooltip" data-placement="bottom" title="{{item.name}}"><img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}"></a>
    <div class="caption">
      <h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
      <form name="uploadItem" ng-submit="addFavorite()" novalidate ng-show="currentUser">
        <div class="form-group">
          <input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}">
        </div>
        <button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
      </form>
    </div>
  </div>
  <!--End of first row-->
</div>

Jay · Accepted Answer · 2017-09-01 05:42:02Z

-1

Thank for your kindness.

I found a way to filter the data in JSON file by category, i just need to put filter: {category:'bakery'} in the ng-repeat

ng-repeat = "item in foods | filter: query | filter: {category:'bakery'}"

answered Sep 1, 2017 at 5:42

Jay

113 bronze badges

Collectives™ on Stack Overflow

Filter data from JSON file by a specific value using angularjs

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related