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

Question

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!

There are differences in the plnkr and your example. Are they intentional, if they are, which one is the source of truth? — Tsvetan Ganev
– Tsvetan Ganev, Commented Jan 10, 2018 at 15:03

Papasmile · Accepted Answer · 2018-01-22 14:35:00Z

1

+50

controller:

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

app.controller('MainCtrl', 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", "seat":"pink"}
       ,{"brand":"Ferrari","color":"red", "seat":"pink"}
       ,{"brand":"Rolls","color":"blue","seat":"pink"}];

  $scope.filteredColors = function(color) {
    var carsvar = $scope.cars;
    for(var x = 0; x < carsvar.length; x++) {
      if (color.name === carsvar[x].color) {
        return true;
      }
    }
    return false; 
  };

});

view:

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.6.6/angular.js" data-semver="1.6.6"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="color in colors | filter: filteredColors"> {{color.name}}
        </li>
    </ul>
  </body>

</html>

edited Jan 22, 2018 at 14:35

answered Jan 20, 2018 at 21:22

Papasmile

6341 gold badge4 silver badges22 bronze badges

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

3 Comments

Papasmile Over a year ago

btw $scope.colors, cars in your plunker don't match your question, but I just copied them over to plunker and works fine :)

Joe82 Over a year ago

Hi, thanks for your answer, but for my user case, I need a filter that could be applied to the ng-repeat (not an "already filtered" scope).

Papasmile Over a year ago

@Joe82, ah, finally understood you. I've updated my answer which now produces * blue * red using a filter.

Nathan · Accepted Answer · 2018-01-10 16:33:19Z

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.

answered Jan 10, 2018 at 16:33

Nathan

1,5201 gold badge12 silver badges22 bronze badges

1 Comment

Joe82 Over a year ago

Thanks for the insight, but I couldn't make it work in my plunkr. I would as well need the filter inside the controller.

Ramesh Rajendran · Accepted Answer · 2018-01-10 15:33:30Z

0

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>

edited Jan 10, 2018 at 15:33

answered Jan 10, 2018 at 15:27

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

2 Comments

Joe82 Over a year ago

Thanks for your comments!

Ramesh Rajendran Over a year ago

I didn't comment here.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related