Sorting or filtering with two elements in the option value in AngularJS

Question

Sorting or filtering with two elements in the option value in AngularJS

I have been struggling for a while now to find a solution to this issue. How can I display the query for the third option value, which should show the filter of DB || CSLB from a json file?

<select ng-model="search.source">
   <option value="DB">DB</option>
   <option value="CSLB">CSLB</option>
   <option value="">DB & CSLB</option>
</select>

The json data looks like this.

"validated": false,
"matches": 10,
"renewed": 2005,
"exMod": 128,
"activeYear": 2003,
"effectiveDate": "10/0/2014",
"address": {
  "zip": 7806,
  "state": "Virgin Islands",
  "city": "Delco",
  "street": "402 Lawton Street"
},
"primaryName": "Lexicondo",
"source": "DB",
"ID": 9,
"_id": "55b5d21cc1389d427f90f9f4"

Any assistance on this matter would be highly appreciated!

javascript angularjs

Answer 1

Answer №1

If you're looking to solve your problem, the code below might be helpful. I utilized the filter method for arrays to perform the sorting.

For more information on the filter method, you can visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

The callback function in the filter method checks if the source matches a value in the select box to group them. If no match is found, the entire array will be displayed (which is why the callback simply returns true).

angular.module('TestApp', [])
  .controller('SearchController', function($scope) {
    this.source = 'All';

    this.items = [{
      name: 'One',
      src: 'DB'
    }, {
      name: 'Two',
      src: 'DB'
    }, {
      name: 'Three',
      src: 'CSLB'
    }, {
      name: 'Four',
      src: 'CSLB'
    }];

    this.applyFilter = function() {
      var _this = this;
      this.filteredItems = this.items.filter(function(value) {
        if (_this.source == 'All') return true;
        return value.src == _this.source;
      });
    };

    this.applyFilter();
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<body ng-app="TestApp" ng-controller="SearchController as search">
  <select ng-model="search.source" ng-change="search.applyFilter()">
    <option value="All">DB & CSLB</option>
    <option value="DB">DB</option>
    <option value="CSLB">CSLB</option>
  </select>
  <p>{{search.source}}</p>
  <ul>
    <li ng-repeat="item in search.filteredItems">{{item.name}}</li>
  </ul>
</body>

Answer 2

If you're looking to solve your problem, the code below might be helpful. I utilized the filter method for arrays to perform the sorting.

For more information on the filter method, you can visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

The callback function in the filter method checks if the source matches a value in the select box to group them. If no match is found, the entire array will be displayed (which is why the callback simply returns true).

angular.module('TestApp', [])
  .controller('SearchController', function($scope) {
    this.source = 'All';

    this.items = [{
      name: 'One',
      src: 'DB'
    }, {
      name: 'Two',
      src: 'DB'
    }, {
      name: 'Three',
      src: 'CSLB'
    }, {
      name: 'Four',
      src: 'CSLB'
    }];

    this.applyFilter = function() {
      var _this = this;
      this.filteredItems = this.items.filter(function(value) {
        if (_this.source == 'All') return true;
        return value.src == _this.source;
      });
    };

    this.applyFilter();
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<body ng-app="TestApp" ng-controller="SearchController as search">
  <select ng-model="search.source" ng-change="search.applyFilter()">
    <option value="All">DB & CSLB</option>
    <option value="DB">DB</option>
    <option value="CSLB">CSLB</option>
  </select>
  <p>{{search.source}}</p>
  <ul>
    <li ng-repeat="item in search.filteredItems">{{item.name}}</li>
  </ul>
</body>

Sorting or filtering with two elements in the option value in AngularJS

Answer №1

Similar questions

The Controller received a JSON object that was empty

NextJS function utilizes its own references within React and automatically fetches data without the need for an import

A step-by-step guide on implementing lazy loading for a specific div section using either AJAX or Java

What is the best way to execute Jest tests concurrently using the VSCode extension?

Only the initial value is being processed in the for loop using Javascript

html interactive/expandable tree

Best practices for organizing an array of objects in JavaScript

What is the best way to extract multiple values from a JavaScript variable and transfer them to Node.js?

Arranging Vue numbers

What is the best way to include multiple views in a main HTML template in Angular?

The HTML iframe is displaying blank content

The variable "vue" is not properly defined within the instance, yet it is being called

Struggling with this CSS is really getting to me

Unlocking the power of Angular Bootstrap UI in your controller

Setting minimum or maximum dates in jquery-simple-datetimepicker is proving to be challenging

Learn how to successfully upload an image using React and Node without having to rely on

Altering the inner HTML content of a div using the ID within an Angular component function

What is the method for applying the action (hide) to every table cell that doesn't include a specific string in its ID?

Position an HTML canvas at the very top of the webpage

Can an image be uploaded using solely jQuery without relying on PHP?