Create a generic function that retrieves a specific property from an array of objects using the select method

Question

Create a generic function that retrieves a specific property from an array of objects using the select method

Currently, I have implemented four functions that select entries from an array based on different properties.

if ($scope.filters.filter1)
    $scope.filteredEntries = $scope.filteredEntries.filter(function (o)
    {
       return o.field1 === $scope.filters.filter1
    });

if ($scope.filters.filter2)
    $scope.filteredEntries = $scope.filteredEntries.filter(function (o)
    {
       return o.field2 === $scope.filters.filter2
    });

However, this code repetition is not ideal. I am looking for a way to encapsulate the selection logic into a separate function, but since the conditions for selecting are different in each case, I am unsure how to proceed. Can I somehow pass the condition as a parameter or implement it differently? Any suggestions on how to achieve this would be appreciated.

In my approach, I envision creating something like the following pseudo code:

expression = e => e.field == value;
miniFilter(expression);
...
function miniFilter(expression)
{
   $scope.filteredEntries = $scope.filteredEntries.filter(function (expression)
   {
      return expression;
   });
 }

I hope my objective is clear. My understanding of JavaScript's methodology is limited, so please bear with me. Thank you.

javascript angularjs

Answer 1

Answer №1

Here is the solution to the initial repetitive code:

var data = [
  {field1: 'Tom', field2: 30}, 
  {field1: 'Max', field2: 30}, 
  {field1: 'Max', field2: 30}
];
var $scope = { filters: {
    filter1: 'Max',
    filter2: 30
  }
};

function MiniFilter(input, filters) {
  for (var prop in filters) {
    var filVal = filters[prop];
    if (filVal)
      input = input.filter(function(item) {        
        return item['field' + prop.match(/\d+$/)[0]] == filVal;
      });
  }
  return input;
}

var result = MiniFilter(data, $scope.filters);
console.log(JSON.stringify(result))

Solution using "expressions":

var data = [
  {field1: 'Tom', field2: 30}, 
  {field1: 'Max', field2: 30}, 
  {field1: 'Max', field2: 30}
];
var $scope = {filters: [
  function(x){ return x.field1 == 'Max';},
  function(x){ return x.field2 == 30;}
]};

function MiniFilter(input, expressions){
  for(var exp of expressions)
    input = input.filter(exp);
  return input
}

var result = MiniFilter(data, $scope.filters);
console.log(JSON.stringify(result));

Answer 2

Here is the solution to the initial repetitive code:

var data = [
  {field1: 'Tom', field2: 30}, 
  {field1: 'Max', field2: 30}, 
  {field1: 'Max', field2: 30}
];
var $scope = { filters: {
    filter1: 'Max',
    filter2: 30
  }
};

function MiniFilter(input, filters) {
  for (var prop in filters) {
    var filVal = filters[prop];
    if (filVal)
      input = input.filter(function(item) {        
        return item['field' + prop.match(/\d+$/)[0]] == filVal;
      });
  }
  return input;
}

var result = MiniFilter(data, $scope.filters);
console.log(JSON.stringify(result))

Solution using "expressions":

var data = [
  {field1: 'Tom', field2: 30}, 
  {field1: 'Max', field2: 30}, 
  {field1: 'Max', field2: 30}
];
var $scope = {filters: [
  function(x){ return x.field1 == 'Max';},
  function(x){ return x.field2 == 30;}
]};

function MiniFilter(input, expressions){
  for(var exp of expressions)
    input = input.filter(exp);
  return input
}

var result = MiniFilter(data, $scope.filters);
console.log(JSON.stringify(result));

Create a generic function that retrieves a specific property from an array of objects using the select method

Answer №1

Similar questions

Variations in speed with closely related jQuery expressions in Internet Explorer

.htaccess rules for rewriting URLs in AngularJS using html5mode and ui-router

Tips for stopping a click from going through a fixed element to the one in the background

Rails application experiencing difficulties in displaying the Raty JS plugin

Utilizing component data in Vue.js to configure the router-link attribute

I am encountering difficulties with importing Node modules into my Vue.js project

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

How can the onclick attribute be modified in an HTML document?

On Linux systems, Node.js in JavaScript interprets strings as objects only

Invoke another component to display within a React.js application

Tips for stopping automatic scrolling (universal solution)

showing information from a table column

Sending an array from one page to another with Vue

What is the best way to maintain an active listGroup even after reloading the page?

Are none of the page links clickable?

Having trouble parsing JSON data from $_POST while utilizing AngularJS

CodeIgniter Flexi Auth - Redirect users promptly upon login expiration

Is it possible to target an iframe and display text simultaneously?

The jQuery slider does not have the functionality to be dragged

Navigate to the specified location using AJAX