How to validate array values within an If statement in Angular app?

Question

In my Angular app, I am trying to display a button based on some values within the below array:

public filterList: Array<any> = [
    { 'name': 'Product', 'selected': true },
    { 'name': 'Client', 'selected': true },
    { 'name': 'Received', 'selected': false }
];

If Product is selected, and Client is selected, and Received is not selected Then I want to display a button.

Else, I want to display an error message.

The below method performs this functionality, but it is not extensible. For example, if I update filterList with another item, it won't be checked in this method.

Instead of hard-coding the array positions, I want to loop through the array:

ngOnInit() {
    this.checkSelectedFilters();
}

checkSelectedFilters() {
    if (this.filterList[0].selected === true
      && this.filterList[1].selected === true
      && this.filterList[2].selected === false) {
      console.log('Display button');
    } else {
      console.log('Display error message');
    }
}

Can someone please tell me how I can update this method so that it meets my above requirement?

Note: when the app loads initially, all selected values are false & are updated by the user

HI @bryan60 I have updated my question to show where I'm running the function. I've also updated the function so that it works based on the above array, but I run into trouble with this function when the array is updated. — user9847788
– user9847788, Commented Sep 1, 2020 at 18:22
@user9847788 : would you mind creating a demo on stackblitz.com so that we can modify it as per your question — Shashank Vivek
– Shashank Vivek, Commented Sep 1, 2020 at 18:24
Hi @ShashankVivek can you try this link please? stackblitz.com/edit/angular-ivy-sykrzs?file=src/app/… I haven't created a stackblitz before — user9847788
– user9847788, Commented Sep 1, 2020 at 18:32

bryan60 · Accepted Answer · 2020-09-01 18:28:58Z

1

I think your best bet is converting the array to an object and checking that way tbh...

checkSelectedFilters() {
  const keyedFilters = this.filterList.reduce((acc, v) => Object.assign(a, {[a.name]: a.selected}), {});
  if (keyedFilters.Product && keyedFilters.Client && !keyedFilters.Received) {
    // button
  } else {
    //error
  }
}

this is assuming these names are unique in the array, but IDK how you'd handle that if they weren't anyway.

answered Sep 1, 2020 at 18:28

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

3 Comments

iamaword Over a year ago

I'd definitely do something like this, when you talk about adding to the array it sounds like you want to add things in sets of 3s, which would need a different object model. Use constants as well, that way if your string conditions change you can change them in one place.

user9847788 Over a year ago

Hi @iamaword when I talk about adding to the array I mean adding another object on it's own: { 'name': 'Something Else', 'selected': true }.

iamaword Over a year ago

In that case, assuming you would need specific business logic to deal with new combinations, it wouldn't much matter if you had a for loop or not. You could even use a nested object instead of an array if you wanted to

Austin T French · Accepted Answer · 2020-09-01 19:14:12Z

0

Ultimately, you want a function to map to an *ngIf.

<button type="button" *ngIf="isValidList()">Valid Button</button>
<div *ngIf="!isValidList()">Error</div>

And, taking sort of your logic but slightly changing it to be in my opinion slightly cleaner:

 isValidList() : boolean {
    let isValid = this.filterList.filter((f) => f.selected 
      || (f.name == this.filterList[0].name && f.select) 
      || ( f.name == this.filterList[1].name && f.select)).length == 2;

   return isValid;
 }

Additionally, using something named such as @bryan60 and his keyedFilters would be cleaner.

Assuming the logic for new items is that any new item must also not be selected, this would work without changes.

In the end though, your data doesn't describe the logic. Adding a property for shouldBeSelected and comparing with that would be better still...

answered Sep 1, 2020 at 19:14

Austin T French

5,1801 gold badge29 silver badges44 bronze badges

1 Comment

bryan60 Over a year ago

i'd say you don't actually want to use this in an ngIf in template as making a habit of that can be a performance drag. better to only run the function when the array changes (like if this is a form on model or value changes) and assign the result to a component property.

Collectives™ on Stack Overflow

How to validate array values within an If statement in Angular app?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related