How to dynamically filter array by object keys and values? - Javascript

Anna
April 28, 2023
209 views
0 votes
2 Answers

I have an array of objects with order details:


let filteredOrders = []; // output array

let orders = [
    {
        id: 1,
        name: "ORDER 1",
        material: "8756"
    },
    {
        id: 2,
        name: "ORDER 2",
        material: "4548"
    },
    {
        id: 3,
        name: "ORDER 3",
        material: "8756"
    },
    {
        id: 4,
        name: "ORDER 4",
        material: "5678"
    }
]

And filters in another object:

let filters = {
    materials: {
        selected: ""
    },
    ids: {
        selected: ""
    }
}

At some point in the program, one or both filters receive a value and I have to filter the array if value is not empty "" and not "all".

For example:

filters.materials.selected = "8756";

Expected output:

filteredOrders  = [
    {
        id: 1,
        name: "ORDER 1",
        material: "8756"
    },
    {
        id: 3,
        name: "ORDER 3",
        material: "8756"
    }
]

Or:

filters.materials.selected = "8756";
filters.ids.selected = 3;

Expected output:

filteredOrders  = [
    {
        id: 3,
        name: "ORDER 3",
        material: "8756"
    }
]

Filter has to be dynamic. No specifiying of "keys".

What I have tried:

for (var [key, value] of Object.entries(filters)) {
    filteredOrders = orders.filter(function(order) {
        if (filters[key].selected !== "all" && filters[key].selected !== "") {
            if (order[key.slice(0, -1)] == filters[key].selected) {
                console.error("ADD", order, order[key.slice(0, -1)], filters[key].selected); 
                return order;
            }
        }
    });
}

// EMPTY
if (filteredOrders.length < 1) filteredOrders = orders;

The output is really strange though, by:

filters.materials.selected = "8756";
filters.ids.selected = 3;

The filteredOrders array has 3 Orders -> ids: 2, 3, 3 (duplicate "3")

Tags: javascript

Answers

If your filter has the same name as your search field, this would be easier.
Then you can do it like below:

let filteredOrders = []; // output array

let orders = [
    {
        id: 1,
        name: "ORDER 1",
        material: "8756"
    },
    {
        id: 2,
        name: "ORDER 2",
        material: "4548"
    },
    {
        id: 3,
        name: "ORDER 3",
        material: "8756"
    },
    {
        id: 4,
        name: "ORDER 4",
        material: "5678"
    }
]

let filters = {
    material: {
        selected: "8756"
    },
    id: {
        selected: ""
    }
}

// Start with all the orders
filteredOrders = orders;

// Loop each filter
for (filter in filters) {
  // If a value is filled in, we start to filter
  if (filters[filter].selected) {
    // Check if order value is the same as filter value
    filteredOrders = filteredOrders.filter(o => o[filter] === filters[filter].selected)
  }
}

// Show result
console.log(filteredOrders)

Try this.

//loop the filter array
for (var [key, value] of Object.entries(filters)) {
    //get the data that is equal to the value from the filter 
    let filtered = orders.filter(function(order) {  
    if (order[key.slice(0, -1)] == value.selected) {
            return order;
        }
    });

    //push unique data to filteredOrders
    if (filtered && filteredOrders.filter(i => i[key.slice(0,-1)] == value.selected).length == 0) {
        filteredOrders.push(...filtered);
    }
}
console.log(filteredOrders);

Please signup or login to give your own answer.

Click here to cancel reply.

How to dynamically filter array by object keys and values? – Javascript

Answers