Filtering an array of objects in real-time

Question

Filtering an array of objects in real-time

var individuals = [
  { Skin: "Bronze", Place: ["South"] },
  { Skin: "Copper", Place: ["North", "South"] },
  { Skin: "Copper", Place: ["North"] }
];

var requirements = [
   { Field: "Skin", Values: ["Copper"] },
   { Field: "Place", Values: ["North", "South"] }
];

In this scenario, the skin field is a string type, and the place field is an array. There are various individuals listed, along with specified filter criteria. The goal is to display only those records where all selected values in the filter match with the data. This includes checking for an exact match based on all criteria provided (without any OR conditions).

Hence, the desired output will be:

{ Skin: "Copper", Place: ["North", "South"] }

If the filter criteria changes to:

var requirements = [
       { Field: "Skin", Values: ["Copper"] },
       { Field: "Place", Values: ["North"] }
    ];

The output would then include:

{ Skin: "Copper", Place: ["North", "South"] },
{ Skin: "Copper", Place: ["North"] }

It's essential that all specified filter values align with the records completely.

javascript arrays filter

Answer 1

Answer №1

I decided to approach the issue by breaking it down into individual functions. While my solution may be more lengthy compared to yours, I believe it is easier to read and understand.

Most importantly, it does produce the desired outcome.

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

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

const compareArrays = (arr1, arr2) => {
  // A simple function for comparing arrays.
  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 finalResult = people.filter(person => {
  // Ensuring all conditions are met.
  for (let condition of conditions) {
    if (condition.Field === 'Color') {
      if (person.Color !== condition.Values[0]) return false;
    }
    if (condition.Field === 'Location') {
      if (!compareArrays(person.Location, condition.Values)) return false;
    }
  }
  // If no mismatches were found, then we have a match!
  return true;
});
console.log(finalResult);

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

Visit https://repl.it/@niels_bom/SparklingSolutionMicrobsd to see this code in action.

Answer 2

I decided to approach the issue by breaking it down into individual functions. While my solution may be more lengthy compared to yours, I believe it is easier to read and understand.

Most importantly, it does produce the desired outcome.

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

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

const compareArrays = (arr1, arr2) => {
  // A simple function for comparing arrays.
  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 finalResult = people.filter(person => {
  // Ensuring all conditions are met.
  for (let condition of conditions) {
    if (condition.Field === 'Color') {
      if (person.Color !== condition.Values[0]) return false;
    }
    if (condition.Field === 'Location') {
      if (!compareArrays(person.Location, condition.Values)) return false;
    }
  }
  // If no mismatches were found, then we have a match!
  return true;
});
console.log(finalResult);

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

Visit https://repl.it/@niels_bom/SparklingSolutionMicrobsd to see this code in action.

Answer 3

Answer №2

After making the third revision, it is now clear to me that you are looking to have an array as a subset of another.

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 have also made updates to your jsfiddle here: https://jsfiddle.net/gzL42dna/2/

Be sure to check out: How to compare arrays in JavaScript?

Answer 4

After making the third revision, it is now clear to me that you are looking to have an array as a subset of another.

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 have also made updates to your jsfiddle here: https://jsfiddle.net/gzL42dna/2/

Be sure to check out: How to compare arrays in JavaScript?

Answer 5

Answer №3

This solution is effective. The use of a Set significantly improves handling partial matches. Feel free to ask for clarification on the code if needed.

var items = [
  { Type: "Book", Genre: ["Adventure"] },
  { Type: "Movie", Genre: ["Comedy", "Drama"] },
  { Type: "Music", Genre: ["Rock"] }
];

var filters = [
   { Field: "Type", Values: ["Movie"] },
   { Field: "Genre", Values: ["Comedy", "Drama"] }
];

console.log(filterItems(items, filters));

function filterItems(items, filters) {
  let itemMatches = [...items]
  for (let i=0; i < filters.length; i++) {
    let {Field, Values} = filters[i]
    itemMatches = itemMatches.filter(obj => {
      if (Array.isArray(obj[Field])) {
        return checkMatches(obj[Field], Values)
      } else {
        return Values.includes(obj[Field])
      }
    })
  }
  return itemMatches
}

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

Answer 6

This solution is effective. The use of a Set significantly improves handling partial matches. Feel free to ask for clarification on the code if needed.

var items = [
  { Type: "Book", Genre: ["Adventure"] },
  { Type: "Movie", Genre: ["Comedy", "Drama"] },
  { Type: "Music", Genre: ["Rock"] }
];

var filters = [
   { Field: "Type", Values: ["Movie"] },
   { Field: "Genre", Values: ["Comedy", "Drama"] }
];

console.log(filterItems(items, filters));

function filterItems(items, filters) {
  let itemMatches = [...items]
  for (let i=0; i < filters.length; i++) {
    let {Field, Values} = filters[i]
    itemMatches = itemMatches.filter(obj => {
      if (Array.isArray(obj[Field])) {
        return checkMatches(obj[Field], Values)
      } else {
        return Values.includes(obj[Field])
      }
    })
  }
  return itemMatches
}

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

Filtering an array of objects in real-time

Answer №1

Answer №2

Answer №3

Similar questions

Filter an array of objects that include a nested array

What is the process for securing a photo to a canvas?

Facing a problem with the execution of the Lightence Ant Design React Template

Sort Array List by Boolean first, followed by Date in JavaScript/TypeScript

Tips for managing onClick code when a user selects "open link in new tab" within a React js environment

How to retrieve the last non-empty element from an array in PHP?

Is there a way to adjust a 5-minute countdown interval timer by 1 minute in a react JS application?

Save the index of a Numpy array to a variable

Organize Dates in React Table

Navigating the process of debugging TypeScript code after it has been webpacked in Visual Studio

Having trouble reading STL files stored in Azure Blob Storage using Three.js

Searching for two distinct nested key values in Ramda

Exploring the ng-repeat directive's scope

Executing code after finishing a fetch in Next.js

While attempting to add an object to the array property in Node.js using Mongoose, an error is encountered

Update Button Visibility Based on State Change in ReactJS

Verify the occurrence of an element within an array inside of another array

The result of adding up all Object Keys is a String, rather than the anticipated Number

Issue with Image display when UpdatePanel is triggered

When using React Router with Suspense for lazy loading, my notFound page consistently displays beneath all of my components