angular2 pipe for multiple arguments

Question

I have a array of thread objects, each thread object with the properties

unit:number
task:number
subtask:number

I want to create a pipe to filter after these threads, so far I have a working pipe like below. I'm not really satisfied with it yet and wanted to ask you guys if there is a more elegant solution?

HTML:

<div class="thread-item" *ngFor="#thread of threadlist | threadPipe:unitPipe:taskPipe:subtaskPipe"></div>

Pipe.ts

export class ThreadPipe implements PipeTransform{

  threadlistCopy:Thread[]=[];

  transform(array:Thread[], [unit,task,subtask]):any{

    //See all Threads
    if(unit == 0 && task == 0 && subtask == 0){
      return array
    }
    //See selected Units only
    if(unit != 0 && task == 0 && subtask == 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
    //See selected Units and Tasks
    if (unit != 0 && task != 0 && subtask == 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit && array[i].task == task){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
    // See selected units, tasks, subtask
    if (unit != 0 && task != 0 && subtask != 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit && array[i].task == task && array[i].subtask == subtask){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
  }
}

every if statement you have could be replaced by `array.filter(i=> i.unit == unit)` and same goes for other if conditions. So, all could be in one line like this `return array.filter(i=>i.unit == unit).filter(i=>i.task==task).filter(i=>i.subtask == subtask)`. is this what are you looking for ? — Abdulrahman Alsoghayer, Apr 05 '16 at 11:49

score 6 · Accepted Answer · answered Apr 05 '16 at 11:56

6

You are implementing your pipe the right way, but you are basically re-inventing the Array.prototype.filter mechanism in your code. A simpler way will be:

export class ThreadPipe implements PipeTransform{

  transform(array:Thread[], [unit,task,subtask]):any{

    //See all Threads
    if(unit == 0 && task == 0 && subtask == 0){
      return array
    }
    //See selected Units only
    if(unit != 0 && task == 0 && subtask == 0){
      return array.filter(thread => {
        return thread.unit === unit;
      });
    }
    //See selected Units and Tasks
    if (unit != 0 && task != 0 && subtask == 0){
      return array.filter(thread => {
        return thread.unit === unit && thread.task === task;
      });
    }
    // See selected units, tasks, subtask
    if (unit != 0 && task != 0 && subtask != 0){
      return array.filter(thread => {
        return thread.unit === unit && thread.task === task && thread.subtask === subtask;
      });
    }
  }
}

answered Apr 05 '16 at 11:56

Yaron Schwimmer

5,327
5
36
59

And after writing this answer I see that @Abdulrahman's comment summarized it nicely. – Yaron Schwimmer Apr 05 '16 at 11:58
Thanks, good to know I am on the right track :) I just wasn't sure I understood the question correctly. – Abdulrahman Alsoghayer Apr 05 '16 at 12:19
thanks a lot! i didn't know of the array.prototype.filter :) and yes in between i was also thinking of using the fat-arrow function – Han Che Apr 05 '16 at 14:19
Lets say that you want the same functionality but with around for example 20 fields instead of the three task, subtask, and unit. This would tedious to write with all the possible combinations there are. How would one write a generic function that could do this? (Meaning, a filter that returns an object if atleast one field matches the criteria) It seems that array.prototype.filter is the way to go, but I don't really understand how I might implement it. I might open a new question for this if it is out of the scope for this question though. – Anton Scotte Feb 17 '17 at 11:38

angular2 pipe for multiple arguments

1 Answers1

Linked