CODEWITHSUNDEEP
javascriptarraysfilter
James Moran
James Moran

Reputation: 630

Filtering an array based on various property types and values

I'm trying to filter an array based on a value. (below is the array and value)

var value = "blue"; // could be red, blue, green, bold, italic

var array = [{
    color: "red",
    bold: false,
    italic: false
}, {
    color: "blue",
    bold: false,
    italic: false
}, {
    color: "green",
    bold: true,
    italic: false
}, {
    color: "green",
    bold: false,
    italic: true
}];

There is then a new array to store the filtered array

var filtered = [];

Then, I was trying to find a solution to filter the data. I can do it for the color:

filtered = array.filter(function(obj) {
    if (obj.color == "green") {
        return obj;
    }
});

console.log(filtered);

However, the value could also be bold or Italic. So, how could I efficiently compare these different data types and efficiently filter the data?

Upvotes: 0

Views: 1396

Answers (6)

Ori Drori
Ori Drori

Reputation: 192317

Check if color equals value, and use the brackets notation to return the value of a property. This will work, as long as the object doesn't have properties with color names.

var array = [{"color":"red","bold":false,"italic":false},{"color":"blue","bold":false,"italic":false},{"color":"green","bold":true,"italic":false},{"color":"green","bold":false,"italic":true}];

var value = "italic"; // could be red, blue, green, bold, italic

var result = array.filter(function(obj) {
  return obj.color === value || obj[value];
});

console.log(result);

Upvotes: 0

kevin ternet
kevin ternet

Reputation: 4612

I propose a generic method which filter on the basis of properties of an object :

var objet = {
    bold: false,
    italic: false
};

var array = [{
    color: "red",
    bold: false,
    italic: false
}, {
    color: "blue",
    bold: false,
    italic: false
}, {
    color: "green",
    bold: true,
    italic: false
}, {
    color: "green",
    bold: false,
    italic: true
}];

var philter = (arr, obj) => arr.filter(x => {
  var bool = true;
  for (var prop in obj)
    if (obj[prop] !== x[prop])
      bool = false;
  return bool;
})
console.log(philter(array, objet));

Upvotes: 0

Ishey4
Ishey4

Reputation: 327

using JQuery this is simple

   filtered = $.grep(array,function(n,i){return n.color=='green' && n.bold==true})

you can change and add parameters (and even nest statements) as you desire. n will be the current iteration of the object and i is the count. if return is true it will be added to the output.

see http://api.jquery.com/jquery.grep/ for more info

Upvotes: 1

TimoStaudinger
TimoStaudinger

Reputation: 42480

If color, bold and italic are the only criteria that you want to filter by, the naive approach may very well be sufficient:

var value = "bold";

var array = [{color:"red",bold:false,italic:false},{color:"blue",bold:false,italic:false},{color:"green",bold:true,italic:false},{color:"green",bold:false,italic:true}];

var filtered = array.filter(function(item) {
  return item.color === value ||
    (value === 'bold' && item.bold) ||
    (value === 'italic' && item.italic);
})

console.log(filtered);

Upvotes: 1

Austin
Austin

Reputation: 1291

Seems like you will need 2 different functions to filter by color or style. Something like this should work:

function filterByColor(color) {
  filtered = array.filter(function(obj) {
    if (obj.color == "green") {
      return obj;
    }
  });
  console.log(filtered);
}

function filterByStyle(style) {
  filtered = array.filter(function(obj) {
    if (obj[style] === true) {
      return obj;
    }
  });
  console.log(filtered);
}

Upvotes: 0

Azad
Azad

Reputation: 5272

var value = "green";

filtered = array.filter(function(obj) {
    if (obj.color == value && (obj.bold || obj.italic)) {
        return obj;
    }
});

Upvotes: 1

Related Questions