How to filter objects with another object in Angular?

Question

Working on a font library, I store fonts like this:

var fonts = [
    {
        name: "Foo",
        style: "Bar",
        families: [
            { name: "A", parent: "B" },
            { name: "C", parent: "D" }
        ]
    } // and so on...
];

And I want to filter out fonts whose families list contains { name: "A", parent: "B" }.

The filter looks like var selection = [{ name: "A", parent: "B" }]

Actually, the code look like this:

// Triggers when a new family is added to the filter
$scope.$on('filter:changed', function(e, selection) {

    _.each($scope.fonts, function(font) {

        _.each(font.families, function(family) {

            _.each(selection, function(item) {

                if(_.isMatch(family, item)) {
                    console.log('font', font);
                    console.log('has a match for family', family);
                } else {
                    console.log('no match for family', family);
                }
            });
        });
    });
});

What is the best way to do it without performance impact, as there will be thousands font objects in the future?

Since you're using underscore. You could look @ findWhere or where — dcodesmith
– dcodesmith, Commented May 7, 2015 at 16:22
@dcodesmith is right, use where to get the array or findWhere if you want only one result — Cyberdelphos
– Cyberdelphos, Commented May 7, 2015 at 16:30
Thanks for your answers. The selection might not be a single object as in the example, but an array of objects. I think I should iterate over $scope.fonts, then over the selectors (selection array) and test them with _.where, right? — ryancey
– ryancey, Commented May 11, 2015 at 7:42

dcodesmith · Accepted Answer · 2015-05-07 16:35:36Z

1

underscore#where

$scope.$on('filter:changed', function(e, selection) {
    var multiselection,
        singleSelection;
    _.each($scope.fonts, function(font) {
        multiselection = _.where(font.families, { name: "A", parent: "B" }); //all matching objects
        singleSelection = _.findWhere(font.families, { name: "A", parent: "B" }); // single matching object
    });
});

JSFIDDLE

edited May 7, 2015 at 16:35

answered May 7, 2015 at 16:27

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

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

Comments

Cyberdelphos · Accepted Answer · 2015-05-07 16:34:42Z

Since you're using underscore use filter

From underscore docs:

_.filter(list, predicate, [context]) Alias: select Looks through each value in the list, returning an array of all the values that pass a truth test (predicate).

So your filter would be (use this only if you want to manipulate data for each object, otherwise use where):

var myFamilyMatch = { name: "A", parent: "B" };

var selection = _.filter(fonts, function(font){
  return _find(font.families, function(family){
     return family == myFamilyMatch;
  };
});

Or simply (and better) use where as @dcodesmith suggested:

_.where(list, properties) Looks through each value in the list, returning an array of all the values that contain all of the key-value pairs listed in properties.

Underscore will take care of performance for you, so don't worry about it.

Collectives™ on Stack Overflow

How to filter objects with another object in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related