Comparing elements in one array to elements in another array

Question

Comparing elements in one array to elements in another array

In AngularJS, the $scope.categories array is populated from a multi-select element.

$scope.categories = ["Adventure", "Strategy"]

To compare this array with the categories in the items array below:

$scope.items = [
    {
        title: "Star Wars",
        categories: ["Adventure"]
    }, {
        title: "Star Search",
        categories: ["Adventure", "Strategy"]
    }, {
        title: "Star Trek",
        categories: ["Adventure", "Family"]
    }, {
    title: "Star Wars",
    categories: ["Family", "Strategy"]
}];

The values in $scope.categories must match those in $scope.items.categories for an object to be pushed to an output array.

The resulting $scope.filtered array will be (items1):

{
  title: "Star Search",
  categories: ["Adventure", "Strategy"]
}

I have the logic up until the point where the loop needs to iterate again... how can I achieve this?

I loop through $scope.categories
I then loop through $scope.items
I then loop through each object's $scope.item.categories array.

I compare the value of $scope.categories with the value of $scope.item.categories

for (var i = 0; i < categories.length; i++) {
  for (var j = 0; j < items.length; j++) {
    for (var k = 0; k < items[j].categories.length; k++) {
      if(categories[i] == items[j].categories[k]) {
        console.log("The value of " + categories[i] + ", matches " + items[j].categories[k]);
      } else {
        console.log("The value of " + categories[i] + ", is not a match");
      }
    }
  }
}

Check out this JSbin example!

javascript arrays angularjs loops for-loop

Answer 1

Answer №1

It's really quite simple:

var filtered = items.filter(function(i) {
  return categories.every(function(c) {
    return i.categories.indexOf(c) >= 0
  })
})

Array.prototype.filter goes through an array and executes a callback function for each item. If the callback function returns true for an item, it is included in the resulting array.

Array.prototype.every iterates over an array and runs a callback function for each item. It returns true if all callbacks return true, otherwise false.

In this scenario, we are filtering the items array based on whether all of the categories meet the condition set by the every callback - that the item must contain all current (c) categories.

(Check out the updated JSBin)

Answer 2

It's really quite simple:

var filtered = items.filter(function(i) {
  return categories.every(function(c) {
    return i.categories.indexOf(c) >= 0
  })
})

Array.prototype.filter goes through an array and executes a callback function for each item. If the callback function returns true for an item, it is included in the resulting array.

Array.prototype.every iterates over an array and runs a callback function for each item. It returns true if all callbacks return true, otherwise false.

In this scenario, we are filtering the items array based on whether all of the categories meet the condition set by the every callback - that the item must contain all current (c) categories.

(Check out the updated JSBin)

Answer 3

Answer №2

Presented here is a more straightforward approach. It operates under the assumption that ordering and capitalization must be adhered to strictly. Interestingly, the combination of filter and join method proves to be more efficient compared to using filter along with every method. If we consider top-level categories (such as

var categories = ["Adventure", "Strategy"]

) as a subset, then incorporating the join() function alongside indexOf can enhance simplicity while still slightly boosting performance.

To assess performance, you can check the test link: http://jsfiddle.net/t3g3k7tL/.

var categories = ["Adventure", "Strategy"];

var items = [
    {
        title: "Star Wars",
        categories: ["Adventure"]
    }, {
        title: "Star Search",
        categories: ["Adventure", "Strategy"]
    }, {
        title: "Star Trek",
        categories: ["Adventure", "Family"]
    }, {
        title: "Star Wars",
        categories: ["Family", "Strategy"]
    }
];

var filtered = items.filter(function(element) {
    return element.categories.join("") === categories.join("");  
});

If the top-level categories are considered a subset rather than an exact match, this alternative solution could be applied:

var filtered = items.filter(function(element) {
    return element.categories.join("").indexOf(categories.join("")) !== -1;    
});

Answer 4

Presented here is a more straightforward approach. It operates under the assumption that ordering and capitalization must be adhered to strictly. Interestingly, the combination of filter and join method proves to be more efficient compared to using filter along with every method. If we consider top-level categories (such as

var categories = ["Adventure", "Strategy"]

) as a subset, then incorporating the join() function alongside indexOf can enhance simplicity while still slightly boosting performance.

To assess performance, you can check the test link: http://jsfiddle.net/t3g3k7tL/.

var categories = ["Adventure", "Strategy"];

var items = [
    {
        title: "Star Wars",
        categories: ["Adventure"]
    }, {
        title: "Star Search",
        categories: ["Adventure", "Strategy"]
    }, {
        title: "Star Trek",
        categories: ["Adventure", "Family"]
    }, {
        title: "Star Wars",
        categories: ["Family", "Strategy"]
    }
];

var filtered = items.filter(function(element) {
    return element.categories.join("") === categories.join("");  
});

If the top-level categories are considered a subset rather than an exact match, this alternative solution could be applied:

var filtered = items.filter(function(element) {
    return element.categories.join("").indexOf(categories.join("")) !== -1;    
});

Comparing elements in one array to elements in another array

Answer №1

Answer №2

Similar questions

Leveraging the power of jQuery Validation in conjunction with Bootbox

Switch the cursor to display the magnifying glass icon for zooming in and out

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

What steps are involved in implementing an ordering system on a restaurant's website using React?

Find the value within the array that includes all the characters, regardless of their order, and then return that

Whenever I attempt to include additional drop-down lists, jQuery fails to function

Conceal a different div unless it includes

working with the express locals function

@vue/cli for automated unit testing

How to Calculate the Time Interval Between Two CORS Requests Using jQuery AJAX

What is the most effective way to access content from a webpage that is rendered

Exploring the world of Node.js callback parameter passing

Utilizing hover effects and timeouts to conditionally show React components

What is the best way to conditionally wrap a useState variable in an if statement without losing its value when accessing it outside the if block in reactjs?

JavaScript error: forEach is not a function

Using Angular service worker to pre-fetch video files

Turn off javascript on a website that you are embedding into another site

How can data be transmitted to the client using node.js?

Is there a way to halt the compiler until an Ajax request is fully processed?

Form a bond with the latest SignalR library to initiate communication