CODEWITHSUNDEEP
angularjsionic-frameworkfilter
Stu Taylor
Stu Taylor

Reputation: 3

Is it possible to filter JSON in Angular using multiple drop down menus

I have built an app for a client using my basic / beginner knowledge of Angular. It took me a lot longer than most would but it has been a great learning experience for me.

The app imports JSON data which displays products with each returned result linking to a page with more information.

The products are manually filtered i.e. I Have built pages for all possible filters (the long hard way). This is displayed as 4 initial options then you go to another page with another 4 options based off the previous option then a final page with 4 further options from here a list is returned based on the the previous selections. This way has led to a large collection of JSON files all based off the filter combinations available.

Background story aside my client now wants to be able to filter all data using drop downs on the opening page. Is this possible?

My JSON data looks like below as an example

{"Level":"student","Style":"barb","Handle":"left","ItemCode":"5.25: 606603, 5.75: 606607","title":"Jaguar Prestyle Relax Leftie","Size":"5.25, 5.75","Price":"£50.00","Description":"One micro-serrated to prevent hair bunching or slippage, these are a particularly good choice for barbers. These scissors are ergonomically designed to reduce strain on your hands and wrists, with an offset handle, finger rest and finger ring inserts for extra comfort. Made from stainless steel with a matt satin finish.","picture":"img/stubarbleft/1.jpg"}

What I would like to do is display the returned data which is not an issue I can do that part. At the top of the page I would like to have a set of dropdown filters so the top one filters the returned data but LEVEL then the second one by STYLE (keeping the level the same as selected) and third option by HANDLE (again keeping the previous options in mind)

Is this possible to do. I am out of my depth a bit but trying to learn as I go.

Thanks for your time guys

Upvotes: 0

Views: 484

Answers (1)

PrimosK
PrimosK

Reputation: 13918

Sure, it's possible. I've prepared a self explanatory code snippet that should help you out. 

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

myApp.controller('MyCtrl', ['$scope',
  function($scope) {

    $scope.model = {
      selectedStyle: "",
      selectedLevel: "",
      filterObject: { style : "", level : ""},
      recordDetails: undefined,
      options: {
        styles: ["", "style1", "style2"],
        levels: ["", "level1", "level2"]
      },
      data: [{
        "id": 1,
        "level": "level1",
        "style": "style1",
        "price": 100
      }, {
        "id": 2,
        "level": "level2",
        "style": "style2",
        "price": 200
      }, {
        "id": 3,
        "level": "level1",
        "style": "style2",
        "price": 300       
      }, {
        "id": 4,
        "level": "level2",
        "style": "style1",
        "price": 400
      }]
    };
    
    $scope.showDetails = function (record) {
      $scope.model.recordDetails = record;
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  
  <select name="styleSelect" id="styleSelect" ng-options="option for option in model.options.styles" ng-model="model.filterObject.style"></select>
  
  <select name="levelSelect" id="levelSelect" ng-options="option for option in model.options.levels" ng-model="model.filterObject.level"></select>

  Current filter object: {{model.filterObject}}
  
  <div ng-repeat="record in model.data | filter:model.filterObject">
    <a href="#" ng-click="showDetails(record)">
      <ul>
        <li>{{record.id}}</li>
        <li>{{record.level}}</li>
        <li>{{record.style}}</li>
      </ul>
    </a>
  </div>
  
  <div>
    Record details:
    {{model.recordDetails}}
  </div>
</div>

Please let me know whether anything needs further explanation.

Upvotes: 0

Related Questions