Comparing objects between 2 arrays in Angularjs

Question

I'm trying to figure the best way to do this, given that there will be a lot of data and I don't want to have giant loops hogging up resources. I have a lot of regular javascript/jquery experience, but am new to Angular and want to do it with Angularjs best practices.

I have a list of items and users can "favorite" them. When viewing all items, I'd like to show the ones that favorited by marking them with an indicator. Both items and favorites are in separate tables and returned as JSON with different IDs.

JS:

$scope.favorites = [];//$http.get of JSON file
$scope.items = [];//$http.get of JSON file

$scope.isFavorite = function(itemId) {
    var len = $scope.favorites. !== 'undefined' ? $scope.favorites.length : 0;
    for(var i = 0; i < len; i++) {
        if($scope.favorites[i].id === itemId) {
            return true;
        }
    }
};

HTML:

<div ng-repeat="item in items">
    <i ng-class="isFavorite(item.id) ? 'icon-bookmark' : 'icon-bookmark-empty'"></i>
</div>

I have a couple other checks for "isFavorite" so I'm trying to figure the best way to compare the 2 without checking every time in a loop. Any suggestions?

romiem · Accepted Answer · 2014-05-23 13:28:52Z

2

The most optimal way I can think of would be to modify the $scope.items array once the favourites http request has returned it's data, and set a 'favourite' boolean property on each item.

That way, your isFavourite method will not trigger on each digest cycle. For example:

var promises = [$http.get('/items'), $http.get('/favourites')];

$q.all(promises).then(function (resultsArray) {

    $scope.items = resultsArray[0];
    var favourites = resultsArray[1];

    $scope.items.forEach(function (item) {
        var matches = favourites.filter(function (f) {
                return f.id === item.id;
            });
        item.favourite = matches.length ? true : false;
    });

});

It's also worth bearing in mind that you probably want to wrap both http requests in a $q.all method so that you can fire a single callback once both http requests have finished.

EDIT: updated to show full code with $q.all implementation

edited May 23, 2014 at 13:28

answered May 23, 2014 at 13:16

romiem

9,1107 gold badges32 silver badges38 bronze badges

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

5 Comments

Sten Muchow Over a year ago

if both arrays are returned from a server req, how can you be sure items is populated here?

romiem Over a year ago

As stated in my answer, you have to wrap the server requests in a $q.all method. For example $q.all([$http.get('/items'), $http.get('/favourites')]).then(function (resultsArray) { console.log(resultsArray); });

Sten Muchow Over a year ago

fair enough but this implementation wont work... not trolling you just stating...

romiem Over a year ago

It will work - because when you use $q.all, the callback only fires when both http requests have fully completed. This means that both items and favourites will be available.

harryBundles Over a year ago

this method did work and was faster than my method. thanks for your help!

Collectives™ on Stack Overflow

Comparing objects between 2 arrays in Angularjs

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related