How to do complex conditional filtering in Javascript?

Question

So I want to filter an array of objects according to a few filters I have created:

items.filter(
    (obj) =>
    (!status || (obj.globalId && obj.globalId !== "")) &&
    (!deletedSwitch || obj.deleted === deletedSwitch) &&
    (!filteredUsername || obj.userId === userId) &&
    (!filteredType || obj.type === filteredType) &&
    (!filteredVariety || obj.variety === filteredVariety) &&
    (!filteredSize || parseInt(obj.size) === filteredSize)
)

So as you can see, I filter the items based on a few properties. These properties are selected through a <select> component. status property used to be a boolean state where I want to check if the item has a globalId or not. However, now I want to change it in a way where I check if status is connected, then I want to filter all items that have a globalId each. But if the status is not connected, I want to filter all items that DO NOT have a globalId. How can I modify my code above to achieve this?

Please post a minimal reproducible example of your attempt, noting input and expected output using the [<>] snippet editor. — mplungjan
– mplungjan, Commented Oct 27, 2022 at 7:44

mplungjan · Accepted Answer · 2022-10-27 07:50:35Z

1

Just add it with OR?

items.filter(obj =>
    ((status === "connected" && obj.globalId && obj.globalId !== "") ||
     (status === "not connected" && !obj.globalId)) &&
    (!deletedSwitch || obj.deleted === deletedSwitch) &&
    (!filteredUsername || obj.userId === userId) &&
    (!filteredType || obj.type === filteredType) &&
    (!filteredVariety || obj.variety === filteredVariety) &&
    (!filteredSize || parseInt(obj.size) === filteredSize)

answered Oct 27, 2022 at 7:50

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas · Accepted Answer · 2022-10-27 07:51:09Z

0

How about using a ternary (conditional expression)?

(status == "connected" ?
 object.globalId && obj.globalId !== "" :
 !object.globalId)

Or, if you anticipate having more status values in the future, using an object is more extensible (and it's arguably more readable in any case):

({
    "connected": object.globalId && obj.globalId !== "",
    "not connected": !object.globalId,
}[status])

answered Oct 27, 2022 at 7:51

Thomas

183k57 gold badges383 silver badges510 bronze badges

Collectives™ on Stack Overflow

How to do complex conditional filtering in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related