0

I need to filter data by selected dropdown item. It currently searches me only once when I select filters and after that it is always empty. Example:

        <select class="select" (change)="onChangeMeal($event)">
            <option value="Izaberit">Choice meal</option>
            <option *ngFor="let meal of mealType" [value]="meal.num">
                {{ meal.name }}
            </option>
        </select>



onChangeMeal(evt) {

let mealTypeNumber = evt.target.value;
console.log(mealTypeNumber);

  switch (mealTypeNumber) {
  case '0':
    this.meals = this.meals.filter(meal => meal.trainerId == '0')
    console.log('0 meal' , this.meals)
    break;

  case '1':
    this.meals = this.meals.filter(meal => meal.trainerId == '1')
    console.log('1 meal' , this.meals)
    break;

  case '2':
    this.meals = this.meals.filter(meal => meal.trainerId == '2')
    break;

  case '3':
    this.meals = this.meals.filter(meal => meal.trainerId == '3')
    break;

  default:
    break;
}

// if(evt.target.value == '1') {
//   console.log('jes')
//   this.meals = this.meals.filter(meal => meal.trainerId == '1')  
// }
// if(evt.target.value == '2') {
//   console.log('jes 2')
//   this.meals = this.meals.filter(meal => meal.trainerId == '2')  
// }

}

He does it only once again. The next time I try to select a dropdown value it returns an empty array.

1
  • 1
    Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the CC BY-SA 4.0 license, for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: How does deleting work?
    – Machavity
    Oct 20, 2020 at 13:38

2 Answers 2

0

Because you're updating your meals data so that the other cases might not work as intended. You need to assign your meals data with another variable like

....subscribe(res) => {
  // here you need to assign in two different variables
  this.allMeals = res;
  this.meals = res;
}

Then in your cases instead of filtering from meals, you need to filter from this.allMeals and assign result to meals variable.

case '2':
    this.meals = this.allMeals.filter(meal => meal.trainerId == '2')
    break;

In this case your meals will have a filtered result from allMeals every time.

0

Don't filter the array directly, because you will lose all items in the array that do not meet the filter criteria.

Instead, hold the items in another variable and use that one to filter

allItems = [...this.meals];
// [...]
this.meals = allItems.filter(() => {});

Playground example

2
  • Hmm, i am to do in your way but same situation. Same. let allMealsClone = [...this.meals] and this.meals = allMealsClone.filter(meal => meal.trainerId == '0')
    – pekamap9
    Sep 28, 2020 at 13:01
  • @pekamap9 It is working, check the added example. If your issue keeps persisting, consider making a reproducible example, showing the problem.
    – user13258211
    Sep 28, 2020 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.