Using If statement in Array.Filter

Question

I am using Array.Filter as:

  this.newData = this.allData.filter(imp =>   
       imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.type: imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )

But my imp.name can be null sometimes so the code errors out.

How can I add an if statement inside filter such that if any of the data is null dont add it to the AND.

Something like

if(imp.name!=null){
  imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase()))
}

Hope I am clear.

can you paste data i.e. filter value and this.allData values? — JackOfAshes - Mohit Gawande
– JackOfAshes - Mohit Gawande, Commented May 22, 2019 at 14:12
Use a normal function and return true or false as you need... — Heretic Monkey
– Heretic Monkey, Commented May 22, 2019 at 14:16
@HereticMonkey I am filtering it out based on the entire conditions which is made up of 3 conditions as per my example. If I use individual if else and return true false how would the results combine. So basically this is the seach criteria. If filter selected matches the array then return filtered list else return all. — aman
– aman, Commented May 22, 2019 at 14:22
So define a Boolean at the top that represents whether the item satisfies the filter. Set that the true or false depending on the various checks your doing. I'm assuming that if any one of the conditions is not met, it should not be included in the list? Just do var passedFilter = true; passedFilter = passedFilter && (condition1); passedFilter = passedFilter && (condition2);... etc. By basic Boolean logic, if any are false, it won't be included. — Heretic Monkey
– Heretic Monkey, Commented May 22, 2019 at 14:26
See if statement checking for multiple boolean conditions for more ways of doing it. — Heretic Monkey
– Heretic Monkey, Commented May 22, 2019 at 14:28

Gergő Almásy · Accepted Answer · 2019-05-22 14:27:56Z

3

If you want to check if a filter exists, and use it only if it exists, I'd do something like this:

items.filter(imp => {
      let keep = true;
      if (imp.name) {
        keep = keep && imp.toLowerCase().includes(filter.name ? filter.name.toLowerCase() : imp.name.toLowerCase());
      }
      if (imp.type) {
        keep = keep && imp.type === (filter.type ? filter.correctionType : imp.type);
      }
      if (imp.createdBy) {
        keep = keep && imp.createdBy.toLowerCase().includes(filter.createdBy? filter.createdBy.toLowerCase(): imp.createdBy.toLowerCase());
      }
      return keep;
    });

answered May 22, 2019 at 14:27

Gergő Almásy

463 bronze badges

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

Comments

Shilly · Accepted Answer · 2019-05-23 14:15:57Z

Personally I find this to be an example of overuse of ternaries. Took a while to figure out the logic and even then I think this does not solve the exact required filtering.

Filter is not shown here, so we can only guess.

this.newData = this.allData.filter(imp => {
    // Check if the properties we'll call methods on, are true-ty values.
    if ( !imp.name || !imp.createdBy ) return false;
    // imp.name.toLowerCase().includes( imp.name.toLowerCase()) is always true.
    // So the only way the name is invalid,
    // is if filter.name exists AND filter.name is not included inside imp.name.
    // So !filter.name gives us true if filter.name does not exist
    // and also makes sure filter.name exists before we try to use toLowerCase();
    const valid_name = !filter.name || imp.name.toLowerCase().includes( filter.name.toLowerCase());
    // Same here imp.type will always equal imp.type, so the ternary is redundant again.
    // The type will only be false if imp.type does not equal filter.correctionType
    const valid_type = !filter.type || imp.type === filter.correctionType;
    // Same again
    const valid_creation = !filter.createdBy || imp.createdBy.toLowerCase().includes( filter.createdBy.toLowerCase());
    // All 3 have to be true.
    return valid_name && valid_type && valid_creation;
});

Naga Sai A · Accepted Answer · 2019-05-22 14:21:12Z

To achieve expected result , use below option of using imp && imp.name in first line of filter

imp.name && imp.name.toLowerCase().includes(((filter.name)

Codepen - https://codepen.io/nagasai/pen/EzowXb?editors=1010

working code:

var allData = [{name: null , type: "A", createdBy: 'test1'},
              {name: 'aaaa' , type: "AB", createdBy: 'test12'},
              {name: 'bbbb' , type: "AA", createdBy: 'test13'},]

var filter = {name: 'bbbb' , correctionType: "AA", createdBy: 'test13'}

 var newData = allData.filter(imp =>   
       imp.name && imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.correctionType : imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )
 
 console.log(newData)

Collectives™ on Stack Overflow

Using If statement in Array.Filter

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related