Question 88637 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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:

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search