This inquiry originates from this source
Within the realm of Javascript, I have crafted a code to facilitate filtering, specifically showcasing elements from the array colors only if they correspond as values in cars.
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);
In an endeavor to apply this concept in Angular JS, I implemented the following:
$scope.colors =["blue","red","pink","yellow"];
$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;
return colorsvar.filter(function(color) {
return carsvar.some(function(car) {
return car.color === color;
});
});
};
Subsequently, within the view:
<ul>
<li ng-repeat="n in colors | filter: filteredColors"> {{n}}
</li>
</ul>
The anticipated outcome should be:
However, the filtering process does not execute optimally. For further reference, please refer to the functional plunkr here. Any assistance provided will be greatly appreciated. Thank you!