针对Javascript中的另一个对象过滤对象数组

Question

I have an array of objects

var data = [
    {
      "body_focus": "upper",
      "difficulty": "three",
      "calories_min": "122",
      "calories_max": "250"
    },
    {
      "body_focus": "upper",
      "difficulty": "three",
      "calories_min": "150",
      "calories_max": "280"
    },
    {
      "body_focus": "lower",
      "difficulty": "two",
      "calories_min": "100",
      "calories_max": "180"
    },
    {
      "body_focus": "total",
      "difficulty": "four",
      "calories_min": "250",
      "calories_max": "350"
    }
]

I want to filter that array of objects against another object

var myObj = {
    "upper": true,
    "three": true
}

so now myObj has a key "upper" and "three" and their values are true . So based these values I want to make a function to get all the objects in the data array that its key "body_focus" has value of "upper" and "difficulty" key that has a value of "three"

so the function should return only these objects

[
    {
      "body_focus": "upper",
      "difficulty": "three",
      "calories_min": "122",
      "calories_max": "250"
    },
    {
      "body_focus": "upper",
      "difficulty": "three",
      "calories_min": "150",
      "calories_max": "280"
    }
]

this is how I tried to approach the problem

var entry;
var found = [];
for (var i = 0; i < data.length; i++) {
    entry = data[i];
    for(var key in myObj) {
        if(entry.body_focus.indexOf(key) !== -1) {
            found.push(entry);
            break;  
        }
    }
}

my code above only checks for the key body_focus , so how can I check for both body_focus and difficulty ? it might seem silly but I've been stuck for hours and can't find a solution

Answer 1

You could use an object for searching which gives the keys and the wanted values, like

search = {
    body_focus: "upper",
    difficulty: "three"
}

then iterate through the array and check all properties of search with the values of the actual object. Return true if all search criteria matches.

 var data = [{ body_focus: "upper", difficulty: "three", calories_min: "122", calories_max: "250" }, { body_focus: "upper", difficulty: "three", calories_min: "150", calories_max: "280" }, { body_focus: "lower", difficulty: "two", calories_min: "100", calories_max: "180" }, { body_focus: "total", difficulty: "four", calories_min: "250", calories_max: "350" }], search = { body_focus: "upper", difficulty: "three" }, result = data.filter(function (o) { return Object.keys(search).every(function (k) { return o[k] === search[k]; }); }); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

This should do the trick I think.

var myObj = {
    "upper": true,
    "three": true
}
var found = [];
for (var i = 0; i < data.length; i++) {
    entry = data[i];
    if(myObj[entry.body_focus] && myObj[entry.difficulty]) {
      found.push(entry);
    }
}

With myObj[entry.body_focus] you are checking if the myObj has the property upper and if it's true. Same with difficulty.

Answer 3

This solution is using a combination of Array.prototype.filter and Array.prototype.every to match all the values in your data object with the keys in the param object.

 var data = [ {"body_focus": "upper", "difficulty": "three", "calories_min": "122", "calories_max": "250"}, {"body_focus": "upper","difficulty": "three","calories_min": "150","calories_max": "280"}, {"body_focus": "lower","difficulty": "two","calories_min": "100","calories_max": "180"}, {"body_focus": "total","difficulty": "four","calories_min": "250","calories_max": "350"} ] var params = { "upper": true, "three": true } function filter(params, data) { const keys = Object.keys(params) return data.filter(item => keys.every(value => ~Object.values(item).indexOf(value)) ) } console.log( filter(params, data) ) 

 <script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script> 

Answer 4

Nina's answer should work for you. But in case you are interested, another way to do it:

 var data = [{ "body_focus": "upper", "difficulty": "three", "calories_min": "122", "calories_max": "250" }, { "body_focus": "upper", "difficulty": "three", "calories_min": "150", "calories_max": "280" }, { "body_focus": "lower", "difficulty": "two", "calories_min": "100", "calories_max": "180" }, { "body_focus": "total", "difficulty": "four", "calories_min": "250", "calories_max": "350" }]; var search = { body_focus: "upper", difficulty: "three" }; var results=$.grep(data,function(datum,index){ var sat=true; Object.keys(search).forEach(function(el){ if(datum[el]!=search[el]) { sat=false; return false; } }); return sat; }); console.log(results); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

The point being you could use $.grep to write a custom filter function and check some condition using the first parameter 'datum' or the second 'index' and return true to indicate filter match or false to indicate otherwise

Answer 5

it would be a good idea to change your myObj object's structure to be more of

let myObj = 
{
    body_focus: "upper",
    difficulty: "three"
}     

as your search object. (as it was mentioned in one of the answers)

you can then use filter on your original array of objects to get what you need.

 let results = data.filter(item => item.body_focus === myObj.body_focus && item.difficulty === myObj.difficulty);