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

Question

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

PrimosK · Accepted Answer · 2018-04-03 13:33:00Z

0

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.

edited Apr 3, 2018 at 13:33

answered Feb 2, 2017 at 10:00

PrimosK

13.9k10 gold badges62 silver badges82 bronze badges

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

3 Comments

Stu Taylor Over a year ago

Thank you PrimosK, I will take a look at the and let you know how I get on. Truly appreciated :)

Stu Taylor Over a year ago

That worked great. I now just need to work out how to link a record to a page of more information through this method and I am sorted :) i.e. click on one of the returned results to view description and price

Stu Taylor Over a year ago

Thank you once again. Spent a morning trying to deconstruct a previous version of the app I had to work with the filtering

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related