Dynamically filtering an array of objects

Question

var persons = [
  { Color: "Gold", Location: ["Down"] },
  { Color: "Silver", Location: ["Up", "Down"] },
  { Color: "Silver", Location: ["Up"] }
];

var criteria = [
   { Field: "Color", Values: ["Silver"] },
   { Field: "Location", Values: ["Up", "Down"] }
];

Here field color is of type String, and Location is an array. I have persons, and then there is a filter criteria. I need an output so that all the values selected in the filter needs to match with the data. So in the data provided, only those records should be visible if Silver, Up and Down are available in a record. (Note the AND parameter, there is no OR condition anywhere).

So the output will be:

{ Color: "Silver", Location: ["Up", "Down"] }

Now if the filter criteria is:

var criteria = [
       { Field: "Color", Values: ["Silver"] },
       { Field: "Location", Values: ["Up"] }
    ];

the output will be:

{ Color: "Silver", Location: ["Up", "Down"] },
{ Color: "Silver", Location: ["Up"] }

So you see all the values in the filter should match with the records.

Answer 1

I broke down the problem into separate functions. It's way more verbose than your solution but I do think it's more readable.

Also: it does work.

var persons = [
  { Color: "Gold", Location: ["Down"] },
  { Color: "Silver", Location: ["Up", "Down"] },
  { Color: "Silver", Location: ["Up"] }
];

var criteria = [
   { Field: "Color", Values: ["Silver"] },
   { Field: "Location", Values: ["Up", "Down"] }
];

const arraysEqual = (arr1, arr2) => {
  // Very simple array comparison.
  if (arr1.length !== arr2.length) return false;
  arr1 = arr1.sort();
  arr2 = arr2.sort();
  for(let i=0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) return false;
  }
  return true;
};

let result = persons.filter(person => {
  // All criteria must match.
  for (let criterium of criteria) {
    if (criterium.Field === 'Color') {
      if (person.Color !== criterium.Values[0]) return false;
    }
    if (criterium.Field === 'Location') {
      if (!arraysEqual(person.Location, criterium.Values)) return false;
    }
  }
  // We didn't *not* match for anything, so we matched!
  return true;
});
console.log(result);

/*
{ Color: "Silver", Location: ["Down", "Up"] }
*/

See https://repl.it/@niels_bom/GoldenIdealMicrobsd for a running example.

Answer 2

After third edit, now I am clear on what you want - to have an array as a subset of the other.

var result = persons.filter(function (person) {
    return criteria.every(function (c) {
        var value = person[c.Field];
        if (typeof value === 'object') {
                return c.Values.length<=value.length && 
                c.Values.every(function(v,i){return value.includes(v) ;});
        }
        else
            return c.Values.indexOf(value) > -1;
    })
})

I also updated your jsfiddle : https://jsfiddle.net/gzL42dna/1/

Also checkout: How to compare arrays in JavaScript?

Answer 3

I believe this works. Using a Set helps a lot with partial matches. Tell me if you would like an explanation of the code.

var persons = [
  { Color: "Gold", Location: ["Down"] },
  { Color: "Silver", Location: ["Up", "Down"] },
  { Color: "Silver", Location: ["Up"] }
];

var criteria = [
   { Field: "Color", Values: ["Silver"] },
   { Field: "Location", Values: ["Up", "Down"] }
];

console.log(match(persons, criteria));

function match(persons, criteria) {
  let personMatches = [...persons]
  for (let i=0; i < criteria.length; i++) {
    let {Field, Values} = criteria[i]
    personMatches = personMatches.filter(obj => {
      if (Array.isArray(obj[Field])) {
        return hasMatches(obj[Field], Values)
      } else {
        return Values.includes(obj[Field])
      }
    })
  }
  return personMatches
}

function hasMatches(arr1, criteria) {
  let criteriaSet = new Set(criteria)
  let personsSet = new Set(arr1)
  for (let el of criteriaSet) {
    if (!personsSet.has(el)) return false
  }
  return true
}