A guide on determining if any item from an array is present in an object's array property and iterating through all objects in JavaScript

Question

A guide on determining if any item from an array is present in an object's array property and iterating through all objects in JavaScript

After searching for a solution to my specific case, I couldn't find one among similar questions. So, I apologize if this seems like a duplicate.

I'm currently working on creating a filter for my website and have encountered an issue regarding marker objects and their corresponding array of tags (referred to as 'types').

Essentially, when a user selects certain types of markers to display, these choices are stored in a 'selectedFilters' array as strings. My goal is to only show the markers whose types match those selected by the user. In other words, any marker object that contains at least one selected type in its 'types' array should be displayed.

const markers = [
{
type: ['Paper', 'Plastic']
},
{
type: ['Burnable', 'Plastic']
}
{
type: ['NotBurnable']
}
.
.
.
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = ????

My approach involves using the filter method along with some techniques to compare each object's types array with the selected filters and return only the matching objects. While I've managed to achieve this with a hardcoded string, I am struggling to implement it with an actual array:

const filteredMarkers = this.markers.filter(
          marker => marker.type.some( type => type == 'Plastic') 
        )

I would greatly appreciate any advice, tips, or suggestions on how to dynamically replace the hardcoded string with the actual array and iterate through it effectively. Is there a different approach to building filters in a vue project?

javascript arrays loops vue.js sorting

Answer 1

Answer №1

Great effort! You're almost there. Make sure to verify if the selectedFilters .includes() any of the marker types.

const markers = [
  {
    type: ['Paper', 'Plastic']
  },
  {
    type: ['Burnable', 'Plastic']
  },
  {
    type: ['NotBurnable']
  }
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = markers.filter(
  marker => marker.type.some(type => selectedFilters.includes(type))
)

console.log(filteredMarkers)

Answer 2

Great effort! You're almost there. Make sure to verify if the selectedFilters .includes() any of the marker types.

const markers = [
  {
    type: ['Paper', 'Plastic']
  },
  {
    type: ['Burnable', 'Plastic']
  },
  {
    type: ['NotBurnable']
  }
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = markers.filter(
  marker => marker.type.some(type => selectedFilters.includes(type))
)

console.log(filteredMarkers)

Answer 3

Answer №2

let items = [
    {
        categories: ['Fruit', 'Vegetable']
    },
    {
        categories: ['Meat', 'Vegetable']
    },
    {
        categories: ['Meat']
    }
]

let selectedCategories = ['Meat', 'Vegetable']

let filteredItems = items.filter(function(item, index, array) {
    return item.categories.some(category => selectedCategories.includes(category));
});

console.log(filteredItems);

Answer 4

let items = [
    {
        categories: ['Fruit', 'Vegetable']
    },
    {
        categories: ['Meat', 'Vegetable']
    },
    {
        categories: ['Meat']
    }
]

let selectedCategories = ['Meat', 'Vegetable']

let filteredItems = items.filter(function(item, index, array) {
    return item.categories.some(category => selectedCategories.includes(category));
});

console.log(filteredItems);

A guide on determining if any item from an array is present in an object's array property and iterating through all objects in JavaScript

Answer №1

Answer №2

Similar questions

The reason why JavaScript doesn't treat "1-1" as 0 in an operation like it does with "123" to 123 during calculations

Enhancing the Rendering of React's props.children

No duplication of Collada material present

Enhance User Experience with the Tooltip Feature and Customized

Displaying the contents of a slot in various locations within a web component

In what way can data be retrieved from within a useEffect block externally?

Finding the initial occurrence of a capital letter within a string with PHP

Transform a string representing a specific time frame into a Unix timestamp using jQuery or JavaScript

Is it really impossible to post complex JSON parameters with Restangular?

Turn off a feature on older buttons

What is the correct way to assign a $scope variable after a successful ajax call?

Unable to reference a file in a local directory using href in HTML

Reading text data and characters into a 2D array using C++

What is the best way to rearrange elements within an object when there is no predetermined starting order?

Refine your search with a JSON object description in expressJS and UnderscoreJS

JavaScript - the global and local variable dilemma

Creating JOIN tables within the create action involves assigning related ids to each table

Encountering a rendering error with Jest while trying to load a functional child component

Steps to retrieve component values within the same component

Transfer the array using Ajax to a PHP script