Filtering by element of an array in Angular.js

Question

Filtering by element of an array in Angular.js

I have a collection of json objects, for instance:

 $scope.users = [
    {name:'Maria',age:25,skills["Angular.js","Node.js"]},
    {name:'Maxime',age:28,skills["HTML","MongoDB"]},
    {name:'Noemie',age:28,skills["CSS","MongoDB"]}
 ]

I am looking to create a search feature. Users should be able to input one or multiple keywords and then my application will filter the variable accordingly.

For example, if a user inputs "28" and "MongoDB", I will store these queries in an array like this:

$scope.queries = [28,"MongoDB"]

I will then filter my users array based on these queries.

It is important to mention that $scope.users is not as straightforward as the example provided; it contains nested arrays and other complex structures. Therefore, I would prefer a function that can effectively search for keywords.

I need guidance on how to implement such a function or filter.

javascript arrays angularjs json filter

Answer 1

Answer №1

Although not the most efficient solution, you may give this a try

let filterCriteria = [28,"MongoDB"];
let filteredUsers = $scope.users.filter(function(user){
  let isMatch = false;
  filterCriteria.forEach(function(criteria){
    if ( user.name == criteria || user.age == criteria || user.skills.indexOf( criteria ) != -1 ) 
    {
       isMatch = true; //assuming you want any of the criteria to be found rather than all
    }
  });
  return isMatch;
});

DEMO

 
let users = [
    {name:'Maria',age:25,skills : ["Angular.js","Node.js"]},
    {name:'Maxime',age:28,skills : ["HTML","MongoDB"]},
    {name:'Noemie',age:28,skills : ["CSS","MongoDB"]}
];

let filterCriteria = [28,"MongoDB"];
let filteredUsers = users.filter(function(user){
  let isMatch = false;
  filterCriteria.forEach(function(criteria){
    if ( user.name == criteria || user.age == criteria || user.skills.indexOf( criteria ) !== -1 ) 
    {
       isMatch = true; //assuming you want any of the criteria to be found rather than all
    }
  });
  return isMatch;
});

document.body.innerHTML += JSON.stringify(filteredUsers, null, 4)

Answer 2

Although not the most efficient solution, you may give this a try

let filterCriteria = [28,"MongoDB"];
let filteredUsers = $scope.users.filter(function(user){
  let isMatch = false;
  filterCriteria.forEach(function(criteria){
    if ( user.name == criteria || user.age == criteria || user.skills.indexOf( criteria ) != -1 ) 
    {
       isMatch = true; //assuming you want any of the criteria to be found rather than all
    }
  });
  return isMatch;
});

DEMO

 
let users = [
    {name:'Maria',age:25,skills : ["Angular.js","Node.js"]},
    {name:'Maxime',age:28,skills : ["HTML","MongoDB"]},
    {name:'Noemie',age:28,skills : ["CSS","MongoDB"]}
];

let filterCriteria = [28,"MongoDB"];
let filteredUsers = users.filter(function(user){
  let isMatch = false;
  filterCriteria.forEach(function(criteria){
    if ( user.name == criteria || user.age == criteria || user.skills.indexOf( criteria ) !== -1 ) 
    {
       isMatch = true; //assuming you want any of the criteria to be found rather than all
    }
  });
  return isMatch;
});

document.body.innerHTML += JSON.stringify(filteredUsers, null, 4)

Filtering by element of an array in Angular.js

Answer №1

Similar questions

Encountering a problem where a 'List<dynamic>' type is not recognized as a subtype of a 'Map<String, dynamic>' type

The array error is looking for a specific class

JavaScript server variable

What does Martin Fowler imply when he advises against automatic deserialization in a REST API implementation?

Combining two multi-dimensional arrays while updating any duplicate values

Using jQuery slider and sortable in combination

Should the .js file type be omitted in the <script> tag for semantic accuracy?

Transform a linear JSON structure into a hierarchical tree structure, resembling a JSON object

Rendering nested JSON using React Native

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Is there a way to integrate my fixed elements with the API call seamlessly?

Is there a way to show all the items within a specific folder simply by clicking on the folder's name?

Basic AngularJS framework with minimal external dependencies

Making the transformation of an array into an object is made easier by utilizing the Array.map() and Array.reduce() methods in JavaScript

The execution of the enzyme wrapper.update() function results in the removal of the value prop from the ref input

Issues arise when attempting to use JavaScript to update the innerHTML content of a webpage

Problem with Handlebars: When compiling, TypeError occurs because inverse is not recognized as a function

Retrieve the attribute of the clicked element by utilizing the on click event handler

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Incorrect comparison of floats within arrays resulted in inaccurate results