Conditional filter javascript (react) - combining two logical operators - || and && or && and &&

Question

Basically in my react app I want to filter an array that meets 3 conditions, but if I use && (and) two times it doesn't work, only if I use || (or) and && (and) together.

Example of data:

// url /practice/${tName}/${level}/play/${nextPage}
// this case url - /practice/Animals/1/play/1
 const { name: tName, pageNumber, box, level } = useParams();

    const userInfo = [{
        _id: '660dc1cbb2ac9d1ad31b59b2'
        },{
        _id: '660dc1cbb2ac9d1ad31b59b3'
        }]

    const initialTasks = [{
    class: 'Animals',
    level: 1,
    rank: 1,
    nr: 1,
    part1: 'animals task 1 level 1 user 1',
    user: '660dc1cbb2ac9d1ad31b59b2'
},
{
    class: 'Animals',
    level: 1,
    rank: 1,
    nr: 2,
    part1: 'animals task 2 level 1 user 1',
    user: '660dc1cbb2ac9d1ad31b59b2'
},
{
    class: 'Animals',
    level: 2,
    rank: 1,
    nr: 3,
    part1: 'animals task 3 level 2 user 1',
    user: '660dc1cbb2ac9d1ad31b59b2'
},
{
    class: 'Animals',
    level: 1,
    rank: 1,
    nr: 1,
    part1: 'animals task 1 level 1 user 2',
    user: '660dc1cbb2ac9d1ad31b59b3'
},
{
    class: 'Hotel',
    level: 1,
    rank: 1,
    nr: 1,
    part1: 'hotel task 1 level 1 user 1',
    user: '660dc1cbb2ac9d1ad31b59b2'
},

Why this code doesn't work? const tasksFiltered = initalTasks.filter(t => t.class === tName && t.level === level && t.user === userInfo._id);

But this one works? const tasksFiltered = initialTasks.filter(t => t.class === tName || t.level === level && t.user === userInfo._id);

I thought || (or) means that just one condition has to be true and the other one can be false...

My objective is when each user is on this page, the filter returns only the tasks that corrrespond to the url params.

PS: This is a simplified example, this data is being fetched trough redux from the database.

Using either makes sense in separate use cases... what kind of filtering are you wanting to do? When all conditions are met, or only when some of them are? Also, FWIW the second example is ambiguous without grouping, e.g. do you mean "(cond1 || cond2) && cond3" or do you mean "cond1 || (cond2 && cond3)"? See the difference? — Drew Reese
– Drew Reese, Commented Apr 16, 2024 at 0:04
Why is this essentially the same question as this one from a different user account? — Phil
– Phil, Commented Apr 16, 2024 at 0:53
@Drew Reese, all conditions must be true, i don't understand why we've to user 'or'. It's 1 and 2 and 3 that must be true. Not 1 or 2 and 3, neither (1 or 2) and 3 that must be true. I still don't see the difference. — FabioNevez
– FabioNevez, Commented Apr 16, 2024 at 18:42
I think I see what the issue is now, including the data helped. I have voted to reopen. In the meantime can you edit to clarify what exactly is working in one versus what isn't working in the other, and clarify what you expect the result to be from the first example that isn't working? — Drew Reese
– Drew Reese, Commented Apr 16, 2024 at 19:35

Drew Reese · Accepted Answer · 2024-04-22 03:09:37Z

userInfo is an array of objects that have a _id property, the code in both cases incorrectly accesses a _id property of the array instead of the array elements.

Why this code doesn't work? const tasksFiltered = initalTasks.filter(t => t.class === tName && t.level === level && t.user === userInfo._id);

But this one works? const tasksFiltered = initialTasks.filter(t => t.class === tName || t.level === level && t.user === userInfo._id);

With the first example all operands need to evaluate truthy in order to be included in the result array while in the second only one operand needs to return truthy because of the logical OR (||) operator.

What I suspect is happening in the second code example is that the t.class === tName sometimes returns true and because of the OR operator it doesn't matter the other "half" of the condition, the first half already is truthy. This does return results, but likely isn't the results you are expecting.

I suspect you want the first code example where all three conditions must be true, and if so, then the third condition always fails because userInfo._id is undefined, e.g. an undefined array property. Update the logic to search the userInfo array for an element that has a matching _id property.

Example:

const tasksFiltered = initialTasks.filter(task =>
  task.class === tName &&
  task.level === level &&
  userInfo.some(user => user._id === task.user);
);

This way the task class, level, and user properties all need to be conditionally matched.

Collectives™ on Stack Overflow

Conditional filter javascript (react) - combining two logical operators - || and && or && and &&

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related