AngularJS - How to check that a specific key has a specific value in an array

Question

In Angular, I have an array like this:

$scope.colors =["blue","red","pink","yellow"];

And another object

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

I would like to do filter, so that

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

The ng-repeat would just display the elements in the $scope.colors that exist as values in the $scope.cars

So, in other words, it would just display blue and red

Thanks in advance!

Your second array is invalid

Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut

2018-01-05 12:15:07 +00:00
Commented Jan 5, 2018 at 12:15 — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Jan 5, 2018 at 12:15
True that. Fixed!

Joe82
– Joe82

2018-01-05 12:22:16 +00:00
Commented Jan 5, 2018 at 12:22 — Joe82
– Joe82, Commented Jan 5, 2018 at 12:22

Faly · Accepted Answer · 2018-01-05 12:39:50Z

1

Given colors and cars arrays, you can filter colors by:

var colors =["blue","red","pink","yellow"];
var cars=[ {"brand":"Ford","color":"blue"},{"brand":"Ferrari","color":"red"},{"brand":"Rolls","color":"blue"}];

var filteredColors = colors.filter(color => cars.some(car => car.color === color));

console.log(filteredColors);

If you cannot use ES6, it should be:

var colors =["blue","red","pink","yellow"];
var cars=[ {"brand":"Ford","color":"blue"},{"brand":"Ferrari","color":"red"},{"brand":"Rolls","color":"blue"}];

var filteredColors = colors.filter(function(color) { 
    return cars.some(function(car) { 
        return car.color === color;
    });
});

console.log(filteredColors);

edited Jan 5, 2018 at 12:39

answered Jan 5, 2018 at 12:18

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

1 Comment

Joe82 Over a year ago

Thanks, would it be possible to do it without ES6 expressions? (for SEO reasons-as for now googlebot doesn't accept ES6) If not I will mark it as valid

Mihai Alexandru-Ionut · Accepted Answer · 2018-01-05 12:34:05Z

You can use map method which accepts as parameter a callback function in order to obtain all the colours from each car item from $scope.cars, and then use Set constructor in order to find out unique colours. Then you have to use a filter function.

Then you have to use a filter function.

let colors =["blue","red","pink","yellow"];
let cars = [{"brand":"Ford","color":"blue"},{"brand":"Ferrari","color":"red"},{"brand":"Rolls","color":"blue"}];
let uniqueColours= [...new Set(cars.map(c => c.color))];
const filteredColors = colors.filter(a=>uniqueColours.includes(a));
console.log(filteredColors);

You can do this in a single line:

const colors =["blue","red","pink","yellow"],cars = [{"brand":"Ford","color":"blue"},{"brand":"Ferrari","color":"red"},{"brand":"Rolls","color":"blue"}],
filteredColors = colors.filter(a => cars.map(a => a.color).includes(a));
console.log(filteredColors);

Without arrow functions.

const colors =["blue","red","pink","yellow"],cars = [{"brand":"Ford","color":"blue"},{"brand":"Ferrari","color":"red"},{"brand":"Rolls","color":"blue"}],
filteredColors = colors.filter(function(a){ 
    return cars.map(function(c){
       return c.color;
    }).includes(a)});
console.log(filteredColors);

Thanks, I think both answers are valid, I will mark @Faly as correct as he was the first to answer, but for angular it would be optimal if the solution would not have ES6 expressions (as for today googlebot breaks with ES6)

Collectives™ on Stack Overflow

AngularJS - How to check that a specific key has a specific value in an array

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related