Exploring an array of objects by comparing the values within an object's array

Question

Exploring an array of objects by comparing the values within an object's array

I possess an item with two fields filter1 and filter2 containing values in the form of arrays

let filter = {filter1:["mine","your"]: filter2:["C","D"]}

//values are not predetermined

The data is structured as an array of objects

let data = [
{ id:1, filter1:["mine"], filter2:["E","C"]},
{ id:2, filter1:["mine"], filter2:["E","C","F"]},
{ id:3, filter1:["your"], filter2:["C"]},
{ id:3, filter1:["your"], filter2:["D","C"]},
{ id:5, filter1:["other"], filter2:["F"]},
...
]

I need to sift through the objects that have either of the fields present in a specific key. For example, if filter is

{filter1:["mine"]: filter2:["F","D"]}

, it will first look for any element of filter1 in the filter1 of the data object, and then search for any element of filter2 which is also found in the filter2 of the data object. It will return the object if any of them is discovered.

A few examples

Result for

{filter1:["mine"]: filter2:["F","D"]}

result = [
{ id:1, filter1:["mine"], filter2:["E","C"]}, //since filter1 "mine"
{ id:2, filter1:["mine"], filter2:["E","C","F"]}, //since filter1 "mine"
{ id:3, filter1:["your"], filter2:["D","C"]}, //since "F" and "D" from filter2, "D" is present
{ id:5, filter1:["other"], filter2:["F"]}, //since "F" from filter2 is found
]

Result for

{filter1:["your"]: filter2:["F","G"]}

result = [
{ id:2, filter1:["mine"], filter2:["E","C","F"]}, //since "F" from filter2 is present
{ id:3, filter1:["your"], filter2:["D","C"]}, //since filter1 is "your"
{ id:5, filter1:["other"], filter2:["F"]}, //since "F" from filter2 is present
]

Result for {filter1:[]: filter2:["D"]}

result = [
{ id:3, filter1:["your"], filter2:["D","C"]}, //since filter2 has "D"
]

javascript arrays object array-filter arrayofarrays

Answer 1

Answer №1

You can achieve the desired outcome by utilizing a blend of .filter(), .some(), and .includes():

const data = [
  { id:1, filter1:["mine"], filter2:["E","C"]},
  { id:2, filter1:["mine"], filter2:["E","C","F"]},
  { id:3, filter1:["your"], filter2:["C"]},
  { id:3, filter1:["your"], filter2:["D","C"]},
  { id:5, filter1:["other"], filter2:["F"]}
];

const search = ({ filter1, filter2 }) =>
  data.filter(item =>
    item.filter1.some(fItem => filter1.includes(fItem)) ||
    item.filter2.some(fItem => filter2.includes(fItem))
);

const result = search({ filter1:["mine"], filter2:["F","D"] });
console.log(result);

Answer 2

You can achieve the desired outcome by utilizing a blend of .filter(), .some(), and .includes():

const data = [
  { id:1, filter1:["mine"], filter2:["E","C"]},
  { id:2, filter1:["mine"], filter2:["E","C","F"]},
  { id:3, filter1:["your"], filter2:["C"]},
  { id:3, filter1:["your"], filter2:["D","C"]},
  { id:5, filter1:["other"], filter2:["F"]}
];

const search = ({ filter1, filter2 }) =>
  data.filter(item =>
    item.filter1.some(fItem => filter1.includes(fItem)) ||
    item.filter2.some(fItem => filter2.includes(fItem))
);

const result = search({ filter1:["mine"], filter2:["F","D"] });
console.log(result);

Answer 3

Answer №2

To enhance the method suggested by RoMilton, you can utilize some() on the Object.entries() of the provided filter object. This approach involves iterating through each key and filter_array using nested some() calls.

If you incorporate the currently processed data element property into an array using Array#concat(), you can accommodate non-array properties in the filter object, such as the id.

const data = [
  { id: 1, filter1: ["mine"], filter2: ["E", "C"] },
  { id: 2, filter1: ["mine"], filter2: ["E", "C", "F"] },
  { id: 3, filter1: ["your"], filter2: ["C"] },
  { id: 3, filter1: ["your"], filter2: ["D", "C"] },
  { id: 5, filter1: ["other"], filter2: ["F"] }
];

const search = (array, filter_object) =>
  array.filter(item =>
    Object.entries(filter_object).some(([key, filter_array]) =>
      [].concat(item[key]).some(fitem => filter_array.includes(fitem)))
  );

const filter = { filter1: ["mine"], filter2: ["F", "D"] };
const result = search(data, filter);

console.log(...result.map(({ id }) => ({ id })));

const filter2 = { id: [5], filter1: ["mine"] }
const result2 = search(data, filter2);

console.log(...result2.map(({ id }) => ({ id })));

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

The usage of concat() can also be implemented in a fixed solution to handle properties that might not be arrays within your data set.

const data = [
  { id: 1, filter1: "mine", filter2: ["E", "C"] },
  { id: 2, filter1: ["mine"], filter2: ["E", "C", "F"] },
  { id: 3, filter1: ["your"], filter2: ["C"] },
  { id: 3, filter1: ["your"], filter2: ["D", "C"] },
  { id: 5, filter1: ["other"], filter2: ["F"] }
];

const search = ({ filter1, filter2 }) => (
  data.filter(item =>
    [].concat(item.filter1).some(fItem => filter1.includes(fItem)) ||
    [].concat(item.filter2).some(fItem => filter2.includes(fItem))
  ));

const result = search({ filter1: ["mine"], filter2: ["F", "D"] });
console.log(result);

Answer 4

To enhance the method suggested by RoMilton, you can utilize some() on the Object.entries() of the provided filter object. This approach involves iterating through each key and filter_array using nested some() calls.

If you incorporate the currently processed data element property into an array using Array#concat(), you can accommodate non-array properties in the filter object, such as the id.

const data = [
  { id: 1, filter1: ["mine"], filter2: ["E", "C"] },
  { id: 2, filter1: ["mine"], filter2: ["E", "C", "F"] },
  { id: 3, filter1: ["your"], filter2: ["C"] },
  { id: 3, filter1: ["your"], filter2: ["D", "C"] },
  { id: 5, filter1: ["other"], filter2: ["F"] }
];

const search = (array, filter_object) =>
  array.filter(item =>
    Object.entries(filter_object).some(([key, filter_array]) =>
      [].concat(item[key]).some(fitem => filter_array.includes(fitem)))
  );

const filter = { filter1: ["mine"], filter2: ["F", "D"] };
const result = search(data, filter);

console.log(...result.map(({ id }) => ({ id })));

const filter2 = { id: [5], filter1: ["mine"] }
const result2 = search(data, filter2);

console.log(...result2.map(({ id }) => ({ id })));

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

The usage of concat() can also be implemented in a fixed solution to handle properties that might not be arrays within your data set.

const data = [
  { id: 1, filter1: "mine", filter2: ["E", "C"] },
  { id: 2, filter1: ["mine"], filter2: ["E", "C", "F"] },
  { id: 3, filter1: ["your"], filter2: ["C"] },
  { id: 3, filter1: ["your"], filter2: ["D", "C"] },
  { id: 5, filter1: ["other"], filter2: ["F"] }
];

const search = ({ filter1, filter2 }) => (
  data.filter(item =>
    [].concat(item.filter1).some(fItem => filter1.includes(fItem)) ||
    [].concat(item.filter2).some(fItem => filter2.includes(fItem))
  ));

const result = search({ filter1: ["mine"], filter2: ["F", "D"] });
console.log(result);

Exploring an array of objects by comparing the values within an object's array

Answer №1

Answer №2

Similar questions

In PHP, implement a function to insert a delimiter into a string retrieved from a

Conceal the item and reveal it upon clicking

Generating buttons by iterating over a list

Animate the width of a div element with CSS from the center

Swapping React components within a list: How to easily change classes

Merge the properties of two class instances deeply

How can I update an image source using JavaScript in a Django project?

Show a confirmation dialog box using bootbox that includes a link when the user selects OK

Filter in AngularJS to display a different value retrieved from the database depending on the current iteration value

The identification of the field is not being transmitted by ng-select

Google charts do not allow data columns on axis #0 to be string type

Import the complete JSON file into a variable as an array

What is the best way to organize a numerical string array in Swift?

On my webpage, there are two buttons labeled "Save" and "Complete". I am in need of creating two distinct alerts for each of the input fields

I am in need of eliminating repetitive comments from each post

Detecting page change cancellation using jQuery/Javascript event

Steps to initiate an iframe event using Jquery

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

How can I clear the value of "token-field" data in jQuery after successfully submitting a form?

Exploring directory organization in GraphQL Queries using GatsbyJS