Check only the properties that two objects have in common. Return every object with matching property values

Question

I'm writing a filter to show only certain elements based on keywords. So I have an array of objects in this key/pair format:

name: "Accounting (AAS) | Business, Design & Hospitality Pathway",
type: "associate of arts",
method: "classroom based",
location: "centennial campus",
pathway: "business, design, & hospitality",
time: "4 semesters",
transfer: "transferable"

I have an object I'm creating from the radio buttons. It's called selectedFilters. If only one radio is checked it would return this:

{type: 'associate of arts'}

If two radios are checked:

{type: 'associate of arts', method: 'hyflex class'}

So the second object doesn't have all the properties of the first object. I need to check if the properties they do have in common match. So if the object created by the radio buttons has two properties. I only want the objects to return if both properties match.

I have an if statement in my forEach loop. But it only returns if every property matches. Can someone find a solution so I'm only pushing the objects where the properties that exist match?

data.forEach(function(el) {
    if (
      el.type == selectedFilters.type &&
      el.method == selectedFilters.method &&
      el.location == selectedFilters.location &&
      el.pathway == selectedFilters.pathway &&
      el.time == selectedFilters.time &&
      el.transfer == selectedFilters.transfer
    ) {
      result.push(el);
    };
  });

Maybe this can put you on the right track https://stackoverflow.com/questions/34392741/best-way-to-get-intersection-of-keys-of-two-objects — Vincent Menzel, Dec 21 '21 at 00:23
@VincentMenzel those are returning the matching keys. I need to iterate through every object in my first array and only return the objects that match all the keys/values in my "selectedFilters" object. — phuzisham, Dec 21 '21 at 00:36
@VincentMenzel Thanks! That does answer my question. Someone else came up with a similar solution but this is a little cleaner I think. — phuzisham, Dec 21 '21 at 03:33

score 2 · Accepted Answer · answered Dec 21 '21 at 00:53

Use Object.entries() and Array.every() to filter the entries from the radio object against the data array

const radioObj = {
  A: 1,
  C: 2
},
radioEntries =  Object.entries(radioObj),
data = [{
    A: 1,
    B: 3,
    C: 2
  },
  {
    A: 2,
    B: 2,
    C:2
  }

]



const res = data.filter(e => radioEntries.every(([k,v]) => e[k] === v))

console.log(res)

BobRodes · Answer 2 · 2021-12-21T00:59:28.460

First off, radio buttons will only have one possible selection. You're looking for check boxes.

Now, If I understand your problem correctly, you're going wrong because you're always checking every property in your candidate object. What you need to do is iterate through your "object you're creating from the radio buttons" (selectedFilters in my example code), checking whether the value of each of those properties equals the value in your candidate object.

Here's an example:

    let objs = [
      {
        name: "Accounting (AAS) | Business, Design & Hospitality Pathway",
        type: "associate of arts",
        method: "classroom based",
        location: "centennial campus",
        pathway: "business, design, & hospitality",
        time: "4 semesters",
        transfer: "transferable"
      },
      {
        name: "Accounting (AAS) | Business, Design & Hospitality Pathway",
        type: "associate of arts",
        method: "classroom based",
        location: "centennial campus",
        pathway: "art, music and history",
        time: "4 semesters",
        transfer: "transferable"
      },
      {
        name: "Accounting (AAS) | Business, Design & Hospitality Pathway",
        type: "associate of science",
        method: "classroom based",
        location: "centennial campus",
        pathway: "business, design, & hospitality",
        time: "4 semesters",
        transfer: "transferable"
      },
    ]  

    let selectedFilters = {
      type: "associate of arts",
      method: "classroom based",
    }

    function checkObj(obj, selectedFilters) {
      for (x in selectedFilters) {
        if (obj[x] !== selectedFilters[x]) return false;
      }

      return true;
    }

    let result = [];
    for (obj of objs) {
      if (checkObj(obj, selectedFilters)) result.push(obj)
    }
    console.log(result);

In the test, I'm using selectedFilters with two selected properties. Of the objects in the array, the third one shouldn't be selected because the type property is different. So, the checkObj function just runs through the selectedFilters properties and compares them to the object passed in. Since it's iterating through the check object, it ignores any properties that the check object doesn't have.

So, you loop through the array of candidate objects, calling the objCheck function for each one. Whenever the function returns true (because all the properties in selectedFilters match the same properties in the candidate object, ignoring any properties that aren't in selectedFilters), the object gets pushed into the result array.

That was close but it didn't seem to work with two properties on the object check. I see what you mean about check boxes. But in this case I have multiple dropdowns. So there can be multiple radio buttons checked for filtering. — phuzisham, Dec 21 '21 at 01:25

score 0 · Answer 3 · answered Dec 21 '21 at 00:59

You can map the object like so

const data = [{
    name: "Accounting (AAS) | Business, Design & Hospitality Pathway",
    type: "associate of arts",
    method: "classroom based",
    location: "centennial campus",
    pathway: "business, design, & hospitality",
    time: "4 semesters",
    transfer: "transferable"
}]

const selectedFilters = {
    type: 'associate of arts',
    transfer: "transferable"
}

const res = data.reduce((acc, entry) => {
    // for each key in filter check if the value of the entry matches the filter value
    // only do the check if the filter value has not been set to false
    // if all filter values pass push the object, else just return the original array
        return Object
            .keys( selectedFilters )
            .reduce( ( ok, key ) => {
                return ok ? selectedFilters[key] === entry[key] : false;
            }, true ) ? acc.concat( entry ) : acc;
    }
    , [])

console.log(res);

Check only the properties that two objects have in common. Return every object with matching property values

3 Answers3