What's the best way to dynamically filter an array with a mix of different object structures?

Question

What's the best way to dynamically filter an array with a mix of different object structures?

Within my data, I have 6 different types of objects (some with double nested arrays), with varying numbers of entries, as long as each entry is unique.

These objects do not possess a consistent unique identifier (one is applied on submission in the backend).

Here is an example array with 2 object types:

arr = [
    {name:"aaa",time:15},
    {name:"aaa",time:22},
    
    {timeline: "250", chars[{a},{b},{c}]},
    {timeline: "220", chars[{d},{e},{f}]},
]
    
obj = {name:"aaa",time:22}

My goal is to determine if obj exists in arr, resulting in a true or false output.

I have attempted the following methods:

I received a recommended method that resulted in an error:
```
 #<Object> is not a function
```

console.log(arr.find(obj))

Another suggestion I found always returns false, even when the element is present

console.log(arr.includes(object))

My personal attempt at a method always fails.

console.log(arr.filter((element, index) => element === obj)

Regarding attempt 4, comparing only the name field is inadequate as it overlooks unique times essential for valid entries.

Providing every field for comparison would not work either, as each object may or may not have certain fields, leading to errors.

Manually pre-filtering into distinct categories is impractical, as each new type added would require manual inclusion in the filter.

If you are aware of a library that can handle this, please share, as it would be ideal. Alternatively, any other suggestions (excluding separating arrays) are welcome.

javascript arrays filter

Answer 1

Answer №1

Utilize arr.some() to verify if the specified object exists within the array.

A convenient method to compare the objects is to stringify both Objects and then compare them.

const arr = [
    {name: "aaa", time: 15},
    {name: "aaa", time: 22},
    {name: "aaa", chars: ["a", "b", "c"]},
    {name: "bbb", chars: ["d", "e", "f"]},
]

const obj1 = {name: "aaa", time: 15}
const obj2 = {name: "aaa", chars: ["a", "b", "c"]}

console.log(arr.some((element) => JSON.stringify(element) === JSON.stringify(obj1)))   // true
console.log(arr.some((element) => JSON.stringify(element) === JSON.stringify(obj2)))   // true

Performance considerations were not taken into account.

Answer 2

Utilize arr.some() to verify if the specified object exists within the array.

A convenient method to compare the objects is to stringify both Objects and then compare them.

const arr = [
    {name: "aaa", time: 15},
    {name: "aaa", time: 22},
    {name: "aaa", chars: ["a", "b", "c"]},
    {name: "bbb", chars: ["d", "e", "f"]},
]

const obj1 = {name: "aaa", time: 15}
const obj2 = {name: "aaa", chars: ["a", "b", "c"]}

console.log(arr.some((element) => JSON.stringify(element) === JSON.stringify(obj1)))   // true
console.log(arr.some((element) => JSON.stringify(element) === JSON.stringify(obj2)))   // true

Performance considerations were not taken into account.

Answer 3

Answer №2

I didn't focus much on performance in this solution, but it could be helpful:

function findObjectInArray(arr, obj) {
  const result = arr.some((element) => compareObjects(element, obj));
  console.log(result);
}

function compareObjects(obj1, obj2) {
  if (Object.keys(obj1).length !== Object.keys(obj2).length) return false;
  for (let property in obj1) {
    if (!obj2.hasOwnProperty(property) || obj2[property] !== obj1[property]) {
      return false;
    }
  }
  return true;
}

You can use this function like this:

array = [
  { name: "aaa", time: 15 },
  { name: "aaa", time: 22 },

  { timeline: "250", data: ["2", "3", "4"] },
  { timeline: "251", data: ["2", "3", "4"] },  // what is chars[{d},{e},{f}] ?!
];

object = { name: "aaa", time: 22 };

findObjectInArray(array, object);

Answer 4

I didn't focus much on performance in this solution, but it could be helpful:

function findObjectInArray(arr, obj) {
  const result = arr.some((element) => compareObjects(element, obj));
  console.log(result);
}

function compareObjects(obj1, obj2) {
  if (Object.keys(obj1).length !== Object.keys(obj2).length) return false;
  for (let property in obj1) {
    if (!obj2.hasOwnProperty(property) || obj2[property] !== obj1[property]) {
      return false;
    }
  }
  return true;
}

You can use this function like this:

array = [
  { name: "aaa", time: 15 },
  { name: "aaa", time: 22 },

  { timeline: "250", data: ["2", "3", "4"] },
  { timeline: "251", data: ["2", "3", "4"] },  // what is chars[{d},{e},{f}] ?!
];

object = { name: "aaa", time: 22 };

findObjectInArray(array, object);

Answer 5

Answer №3

Issue : The variable arr does not contain a valid array. The nested chars does not have a valid value.

Resolution : To address this issue, you can convert the JSON object into a JSON string and compare the values.

This approach is effective when searching for a single object within the arr array.

Check out the Live Demo below:

const arr = [
    {name:"aaa",time:15},
    {name:"aaa",time:22},  
    {timeline: "250", chars: [{a: 1},{b: 2},{c: 3}]},
    {timeline: "220", chars: [{d: 4},{e: 5},{f: 6}]},
];
    
const obj = {name:"aaa",time:22};

const res = JSON.stringify(arr).indexOf(JSON.stringify(obj)) !== -1 ? true : false;

console.log(res);

Answer 6

Issue : The variable arr does not contain a valid array. The nested chars does not have a valid value.

Resolution : To address this issue, you can convert the JSON object into a JSON string and compare the values.

This approach is effective when searching for a single object within the arr array.

Check out the Live Demo below:

const arr = [
    {name:"aaa",time:15},
    {name:"aaa",time:22},  
    {timeline: "250", chars: [{a: 1},{b: 2},{c: 3}]},
    {timeline: "220", chars: [{d: 4},{e: 5},{f: 6}]},
];
    
const obj = {name:"aaa",time:22};

const res = JSON.stringify(arr).indexOf(JSON.stringify(obj)) !== -1 ? true : false;

console.log(res);

What's the best way to dynamically filter an array with a mix of different object structures?

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript functions triggered upon page reload or refresh

Activate an event on a shadow DOM element that is covered by an element in the light DOM (not directly related)

Is there a way to automatically restart my Gulp task when I save changes?

Achieving two-way data binding using a Service in AngularJS - Step by step guide

Utilize the return value within a .map function following the completion of a request.get call

Transform the constant character pointer into an integer array

Utilizing Ajax to Populate a Dropdown List with Data

Controlling the Quantity of Selected Checkboxes with JavaScript

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

Using Angular's ngBlur directive on multiple input fields

Testing the functionality of an Express.js application through unit testing

Issue: `Alert` not triggering after clicking on anchor link in AJAX response

Transforming class attributes in Typescript

What's the best method for concealing components: using a class to hide or removing them from the

Routes inoperative as intended

Utilizing react hooks to sort through information

What steps should I take to fix the error I'm encountering with React Material UI

Unable to extract query parameters from URL using Express JS as req.query returns an empty object

What is the best way to utilize jquery .grep() for searching and modifying an object?

Setting the iDisplayLength property in jQuery Datatables to -1 will display all rows in the table