Array filtering functions similarly to marketplace filtering tools

Question

Array filtering functions similarly to marketplace filtering tools

In order to make the filter function like a marketplace filter, I want to only see items related to the selected brand and status.

For example:

partners = [
0:{
year: "2022"
badge_status: "badge-success"
sale_date: "01/07/2022"
item_sold: "OATMEAL STOUT - Mark The Shadow"
month: "JULY"
partner: "BASTARDS"
quantity_items: 1
status: "COMPLETED" // **true**
amount_paid: 1
},
1:{
year: "2022"
badge_status: "badge-danger"
sale_date: "04/07/2022"
item_sold: "IPA - Hector 5 Rounds"
month: "JULY"
partner: "BASTARDS"
quantity_items: 1
status: "Payment error occurred" // **false**
amount_paid: 4
},
2:{
year: "2022"
badge_status: "badge-success"
sale_date: "04/07/2022"
item_sold: "IPA - Hector 5 Rounds"
month: "JULY"
partner: "BASTARDS"
quantity_items: 3
status: "COMPLETED" // **true**
amount_paid: 3
}
]

This is my current array in the database. I need to be able to filter by 'item_sold' and/or 'status'. Each selected item_sold should return an array as shown in the indexed image below

 this.filtered2 = function(filtering){
      //  console.clear()
      let filterInput = this.search
      let filters = [...this.search].filter(input=> input.value).map(input => ({
        filter: input.name,
        value: input.value
      }))
      console.log('Items to search for', filters)
       return filtrada.filter(product => {
        console.log('PRODUCT', product)
        return filters.every(filter =>{
          console.log("Filter", filter)
          return product[filter.filter] == filter.value
        })
      })

My initial filter will involve selecting the year, month, and partner:

Therefore, in my new array, I will only display products from the selected partner, sale month, and year

The issue arises when I want to apply another filter, to show only the selected products on my list, and if I set a status (sold/not_sold), it should return filtered products with the chosen status. It should function similar to a marketplace array where selecting a brand or price range affects what is displayed...

Currently, following @nem0z's suggestion, when the first item_sold is selected, it returns the filtered array, but upon selecting the second item_sold, it returns empty [].

THIS.SEARCH will receive a value for each selection made on the HTML page

[Image of table only with item_sold filter][1] [1]: https://i.stack.imgur.com/1E9sn.png

javascript arrays angular typescript

Answer 1

Answer №1

Note: You have the freedom to customize the code completely and add or remove filters as needed ;)

Imagine you possess an array of object that represents products, and you want to filter it using html selects with this script:

JS :

    const products = [
    {
        productName: 'product 1',
        partner: 'partner 1',
        status: true,
    },
    {
        productName: 'product 2',
        partner: 'partner 1',
        status: true,
    },
    {
        productName: 'product 1',
        partner: 'partner 2',
        status: false,
    },
];

let filterProducts = function(products) {
    let filterInputs = document.querySelectorAll('.filter');

    let filters = [...filterInputs].filter(input => input.value).map(input => ({filter: input.name, value: input.value}));

    return products.filter(product => {
        return filters.every(filter => {
            return product[filter.filter] == filter.value;
        });
    });
}

document.querySelector('#searchBtn').addEventListener('click', e => {
    let result = filterProducts(products);
    console.log(result);
});

HTML :

    <select name="productName" class="filter">
    <option value="">-----</option>
    <option value="product 1">product 1</option>
    <option value="product 2">product 2</option>
</select>

<select name="partner" class="filter">
    <option value="">-----</option>
    <option value="partner 1">partner 1</option>
    <option value="partner 2">partner 2</option>
</select>

<select name="status" class="filter">
    <option value="">-----</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<button type="button" id="searchBtn">Search</button>

Answer 2

Note: You have the freedom to customize the code completely and add or remove filters as needed ;)

Imagine you possess an array of object that represents products, and you want to filter it using html selects with this script:

JS :

    const products = [
    {
        productName: 'product 1',
        partner: 'partner 1',
        status: true,
    },
    {
        productName: 'product 2',
        partner: 'partner 1',
        status: true,
    },
    {
        productName: 'product 1',
        partner: 'partner 2',
        status: false,
    },
];

let filterProducts = function(products) {
    let filterInputs = document.querySelectorAll('.filter');

    let filters = [...filterInputs].filter(input => input.value).map(input => ({filter: input.name, value: input.value}));

    return products.filter(product => {
        return filters.every(filter => {
            return product[filter.filter] == filter.value;
        });
    });
}

document.querySelector('#searchBtn').addEventListener('click', e => {
    let result = filterProducts(products);
    console.log(result);
});

HTML :

    <select name="productName" class="filter">
    <option value="">-----</option>
    <option value="product 1">product 1</option>
    <option value="product 2">product 2</option>
</select>

<select name="partner" class="filter">
    <option value="">-----</option>
    <option value="partner 1">partner 1</option>
    <option value="partner 2">partner 2</option>
</select>

<select name="status" class="filter">
    <option value="">-----</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

<button type="button" id="searchBtn">Search</button>

Array filtering functions similarly to marketplace filtering tools

Answer №1

Similar questions

When navigating to a new URL in Angular 7, the browser will automatically redirect to the home component

Invoke React Component Function using onclick in dangerouslySetInnerHTML

change visibility:hidden to visible in a css class using JavaScript

What is the best way to output multiple Div elements using Jquery or Javascript?

Exploring solutions for handling asynchronous issues with vue3-google-map

Can someone guide me on configuring Material-UI DataGrid in React to have multiple headers with column span?

Stop users from repeating an action

Error code 70006 encountered in Typescript when attempting to reference a type as "any"

Angular doesn't support this particular type as an injection token

Execute the 'loadURL' function in the electron-Angular project when the Angular Compiler has finished preparing

Building a Multifaceted Website using React and Node.js

JavaScript Filtering Techniques

My NPM Install is throwing multiple errors (error number 1). What steps can be taken to troubleshoot and

When calling mongoose.connect(), the initial parameter must be a String but it was found to be

Express-Session Object Method

Minimize the cyclomatic complexity of a TypeScript function

The persistentFilter in the Tabulator is failing to verify for the headerFilterEmptyCheck

Tips for correctly linking JS and CSS resources in Node.js/Express

What could be the reason behind receiving a TypeError upon refreshing the page, where it claims that a state is not found even though that may not be the actual situation?

Executing a function with the initial click