Filtering in AngularJS can be performed by checking if a value in a specific key of one array is also present as a value in a specific

Question

Filtering in AngularJS can be performed by checking if a value in a specific key of one array is also present as a value in a specific

This query was originally posted on this thread

I am looking to implement a filter that will display the values of colors.name only if they also exist in cars.color

$scope.colors = [{"name":"blue","count":2},
                 {"name":"red","count":12},
                 {"name":"pink","count":5},
                 {"name":"yellow","count":2}];

$scope.cars=[ {"brand":"Ford","color":"blue", "seat":"pink"}
       ,{"brand":"Ferrari","color":"red", "seat":"pink"}
       ,{"brand":"Rolls","color":"blue","seat":"pink"}];

When displaying in the view:

<ul>
    <li ng-repeat="n in colors | filter: filteredColors"> {{n}}
    </li>
</ul>

The expected outcome is:

blue

red

I am seeking a solution without using ES6, and I prefer to have the filter logic within the controller. Visit the following plunkr here. Thank you in advance!

javascript angularjs

Answer 1

Answer №1

code snippet:

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

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

  $scope.items = [{"name":"apple","quantity":5},
                 {"name":"banana","quantity":10},
                 {"name":"orange","quantity":7},
                 {"name":"grape","quantity":3}];

  $scope.filters=[ {"type":"fruit","color":"red"}
       ,{"type":"vegetable","color":"green"}
       ,{"type":"fruit","color":"yellow"}];

  $scope.filteredItems = function(filter) {
    var itemsArray = $scope.filters;
    for(var i = 0; i < itemsArray.length; i++) {
      if (filter.name === itemsArray[i].type) {
        return true;
      }
    }
    return false; 
  };

});

webpage structure:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Example</title>
    <link rel="stylesheet" href="styles.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70114e47554c414307494750042403">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" data-semver="1.8.2"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="DataCtrl">
    <ul>
        <li ng-repeat="item in items | filter: filteredItems"> {{item.name}}
        </li>
    </ul>
  </body>

</html>

Answer 2

code snippet:

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

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

  $scope.items = [{"name":"apple","quantity":5},
                 {"name":"banana","quantity":10},
                 {"name":"orange","quantity":7},
                 {"name":"grape","quantity":3}];

  $scope.filters=[ {"type":"fruit","color":"red"}
       ,{"type":"vegetable","color":"green"}
       ,{"type":"fruit","color":"yellow"}];

  $scope.filteredItems = function(filter) {
    var itemsArray = $scope.filters;
    for(var i = 0; i < itemsArray.length; i++) {
      if (filter.name === itemsArray[i].type) {
        return true;
      }
    }
    return false; 
  };

});

webpage structure:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Example</title>
    <link rel="stylesheet" href="styles.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70114e47554c414307494750042403">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" data-semver="1.8.2"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="DataCtrl">
    <ul>
        <li ng-repeat="item in items | filter: filteredItems"> {{item.name}}
        </li>
    </ul>
  </body>

</html>

Answer 3

Answer №2

If you want to customize your filtering process, you can create a custom filter like this:

app.filter('colorFilter', function(){
    return function(val){
        var colorsList = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];
        var filteredColors = []
        angular.forEach(val, function(item){
            angular.forEach(colorsList, function(color){
                if(item.color === color.name)
                    filteredColors.push(item)
            })
        })
        return filteredColors;
    }
})

After creating the filter, you can use it in your HTML like this:

<li ng-repeat="car in cars | colorFilter"> {{car.color}}

Give this approach a try and see how it works for you.

Answer 4

If you want to customize your filtering process, you can create a custom filter like this:

app.filter('colorFilter', function(){
    return function(val){
        var colorsList = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];
        var filteredColors = []
        angular.forEach(val, function(item){
            angular.forEach(colorsList, function(color){
                if(item.color === color.name)
                    filteredColors.push(item)
            })
        })
        return filteredColors;
    }
})

After creating the filter, you can use it in your HTML like this:

<li ng-repeat="car in cars | colorFilter"> {{car.color}}

Give this approach a try and see how it works for you.

Answer 5

Answer №3

In response to your initial inquiry, there are solutions available that do not utilize ES6. AngularJS - How to check that a specific key has a specific value in an array

It seems unnecessary to rely on built-in functions for your logic.

Consider using a manual loop instead of resorting to map or include, keeping it simple and following traditional JavaScript practices within angularjs. Refer to this answer as guidance, and implement it with angular.filter().

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors  = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];



$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

$scope.filteredColors = function () {
var colorsvar = $scope.colors;
var carsvar = $scope.cars;
$scope.newValue = [];
for (var i = 0; i < colorsvar.length; i++) {
    for (var j = 0; j < carsvar.length; j++) {
        if (colorsvar[i].name == carsvar[j].color) {
            if ($scope.newValue.indexOf(colorsvar[i].name) ==-1) {
                $scope.newValue.push(colorsvar[i].name);
            }
        }
    }
}
   return $scope.newValue;
  };
 })

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


<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in filteredColors()"> {{n}}
    </li>
</ul>
</div>

Answer 6

In response to your initial inquiry, there are solutions available that do not utilize ES6. AngularJS - How to check that a specific key has a specific value in an array

It seems unnecessary to rely on built-in functions for your logic.

Consider using a manual loop instead of resorting to map or include, keeping it simple and following traditional JavaScript practices within angularjs. Refer to this answer as guidance, and implement it with angular.filter().

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors  = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];



$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

$scope.filteredColors = function () {
var colorsvar = $scope.colors;
var carsvar = $scope.cars;
$scope.newValue = [];
for (var i = 0; i < colorsvar.length; i++) {
    for (var j = 0; j < carsvar.length; j++) {
        if (colorsvar[i].name == carsvar[j].color) {
            if ($scope.newValue.indexOf(colorsvar[i].name) ==-1) {
                $scope.newValue.push(colorsvar[i].name);
            }
        }
    }
}
   return $scope.newValue;
  };
 })

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


<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in filteredColors()"> {{n}}
    </li>
</ul>
</div>

Filtering in AngularJS can be performed by checking if a value in a specific key of one array is also present as a value in a specific

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript date formatting without using jQuery

What is the best way to configure my AngularJS routing for managing URL rewriting and page reloads effectively?

Having difficulty adding items to the shopping cart

How can I showcase the selected file using jQuery's querySelector?

Conflicts arising between smoothState.js and other plugins

How can constants in AngularJS be defined in relation to other constants?

Learn the steps for submitting and interpreting information in Node Express

The parameter 'data' is assumed to have an 'any' type in React hooks, according to ts(7006)

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

What is the process for opening and populating dialogs from dynamically mapped cards?

What is the best way to change the "MuiPaper-elevation1" attribute in a Card element within Material-UI?

Having trouble with d3 / svg layering when introducing new nodes overtime

What is the best way to show only a specific v-for element in Vue.js?

Utilizing NextJS to retrieve cookie data within React components

Moving an array in AngularJS from one file to another

Ways to break down a collection of multiple arrays

What is the best way to input an HTML element into AngularJS code?

Comparison of Ajax and submit: Why am I not receiving identical responses?

Can you provide an example and explain the functions `getOptionSelected` and `getOptionLabel` in Material UI?

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!