Angular JS - Filter when value in specific key in one array also appears as value in specific key in another array

This questions comes from here

I want to make a filtering, so that I can show the values of colors.name just when they also appear as a value 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"}]; 

And then in the view:

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

The result should be

blue

red

I need the answer not to have ES6, and I need the filter to be in the controller. See plunkr here. Thanks in advance!

3 Answers

Answers 1

You can use a custom filter:

 app.filter('colorFilter', function(){     return function(val){         var colorsvar = [{"name":"blue","count":2},              {"name":"red","count":12},              {"name":"pink","count":5},              {"name":"yellow","count":2}];         var filtered = []         angular.forEach(val, function(key, value){                 angular.forEach(colorsvar, function(key2, value2){                      if(key.color === key2.name)                          filtered.push(key)                 })         })         return filtered;     } }) 

And then on your html:

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

Hope this helps.

Answers 2

As per your first question, there have some answers without using ES6. AngularJS - How to check that a specific key has a specific value in an array

So I thought you don't need to use any inbuilt function to do your logic.

Try to use with manual loop instead of using map or include bla bla bla.. Do Just like a normal JavaScript way in angularjs. Get this answer as a key. Take this answer as a key and do 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>

Answers 3

$scope.filteredColors = function() {   var colorsvar = $scope.colors;   var carsvar = $scope.cars;   var matches = [];   for (var i = 0; i < colorsvar.length; i++) {     for(var x = 0; x < carsvar.length; x++) {       if (colorsvar[i].name === carsvar[x].color) {         matches.push(colorsvar[i].name);         break;       }     }   }   return matches;  }; 

and

<ul>     <li ng-repeat="n in filteredColors()"> {{n}} </li> </ul> 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati