AngularJS: Filtering one array with another array

Question

AngularJS: Filtering one array with another array

I have a data structure structured in the following way:

$scope.data = [
  {
    title: "Title1",
    countries: ['USA', 'Canada', 'Russia']
  },
  {
    title: "Title2",
    countries: ['France', 'Germany']
  }
];

Each item contains an array of country names.

The data is displayed as follows:

<tr ng-repeat="dataItem in data">

I would like to allow users to filter this list by entering a list of countries in an input field:

How can I achieve this?

Currently, I have implemented something similar to this:

  <input ng-model="searchFilter.countries">
   ...
  <tr ng-repeat="dataItem in data | filter: searchFilter: true">

However, this only works for one country and not for arrays of countries listed in the input separated by commas.

javascript angularjs

Answer 1

Answer №1

Here's a straightforward approach without the need for a custom filter:

HTML:

<input ng-model="selectedCountries" ng-list>

<tr ng-repeat="item in items | filter:countryFilter">

JS:

$scope.countryFilter = function(item) {
    if (!$scope.selectedCountries || $scope.selectedCountries.length < 1)
        return true;
    var foundMatch = false;
    $scope.selectedCountries.filter(function(country) {
        foundMatch = foundMatch || item.countries.indexOf(country) != -1
    });
    return foundMatch;
};

VIEW DEMO HERE

Answer 2

Here's a straightforward approach without the need for a custom filter:

HTML:

<input ng-model="selectedCountries" ng-list>

<tr ng-repeat="item in items | filter:countryFilter">

JS:

$scope.countryFilter = function(item) {
    if (!$scope.selectedCountries || $scope.selectedCountries.length < 1)
        return true;
    var foundMatch = false;
    $scope.selectedCountries.filter(function(country) {
        foundMatch = foundMatch || item.countries.indexOf(country) != -1
    });
    return foundMatch;
};

VIEW DEMO HERE

Answer 3

Answer №2

Check out the example I made here.

This code utilizes the ngList directive as suggested by Zahori and includes a custom filter for countries.

myApp.filter('CountryFilter', function() {
    return function(items, countries) {
        if (!angular.isUndefined(items) && !angular.isUndefined(countries) && countries.length > 0) {
            var filtered = [];

            angular.forEach(items, function(item) {
                angular.forEach(countries, function(currentCountry) {
                     if(item.countries.indexOf(currentCountry) >= 0 ) filtered.push(item);
                });

            });

            return filtered;
        } else {
            return items;
        }
    };
});

Answer 4

Check out the example I made here.

This code utilizes the ngList directive as suggested by Zahori and includes a custom filter for countries.

myApp.filter('CountryFilter', function() {
    return function(items, countries) {
        if (!angular.isUndefined(items) && !angular.isUndefined(countries) && countries.length > 0) {
            var filtered = [];

            angular.forEach(items, function(item) {
                angular.forEach(countries, function(currentCountry) {
                     if(item.countries.indexOf(currentCountry) >= 0 ) filtered.push(item);
                });

            });

            return filtered;
        } else {
            return items;
        }
    };
});

Answer 5

Answer №3

Your Input must be formatted as a String, not an Array. To achieve this, consider utilizing ngList.

For guidance on how to implement ngList effectively, refer to the following helpful example: https://docs.angularjs.org/api/ng/directive/ngList

Answer 6

Your Input must be formatted as a String, not an Array. To achieve this, consider utilizing ngList.

For guidance on how to implement ngList effectively, refer to the following helpful example: https://docs.angularjs.org/api/ng/directive/ngList

Answer 7

Answer №4

Make sure to implement the searchFilter as a method within your $scope object. This will allow you to customize the logic and not just default to searching by string only.

$scope.searchFilter = function (dataItem) {
    // Add your custom search logic here and return true/false accordingly.
};

Answer 8

Make sure to implement the searchFilter as a method within your $scope object. This will allow you to customize the logic and not just default to searching by string only.

$scope.searchFilter = function (dataItem) {
    // Add your custom search logic here and return true/false accordingly.
};

AngularJS: Filtering one array with another array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to refine data using multiple criteria

The functionality of Bootstrap Scrollspy seems to be malfunctioning as it fails to navigate or scroll through the content

Entity Framework AJAX Delete Functionality Fails to Operate

Splitting a JavaScript string into a two-dimensional array

Feeling lost when it comes to forms and hitting that submit button?

Steps for executing the function in the specifications - Protractor

Include a class in ul > li elements upon page load in Angular4

Interested in building an album app using Django Tastypie and Backbone?

Error in executing test case with NodeJs, express, and MongoDB with Jest

Switching image sources using jQuery on click

Removing a MongoDB record when a URL is accessed using node.js

What is the best way to arrange an array of objects based on a specific attribute?

Exporting JSON data to an Excel file using an array of objects with embedded arrays

Leveraging an HTML interface in conjunction with a node.js application

Tips for creating a filter in React JS using checkboxes

What is the best way to show an array within a string using javascript?

The system has encountered an issue: "EntityMetadataNotFound: Unable to locate metadata for the entity named 'User

Transform the Jquery code for filtering a list based on checkboxes to Vanilla JavaScript

Updating WordPress div content based on selected post type using dropdown menu

Ways to customize the color of a cell in fullcalendar