javascript - Show all filter on Aurelia value converter -

at moment app displays exercises , filters them muscle group using select option. i'm struggling understand how display of them.

as app loaded filtered muscle group, or if filtered value of 'all' doesn't display not specified muscle group in json. organised in following way:

select option call filter (muscle filters array off muscle groups)

<div class="form-group">    <label for="muscle">show:</label>       <select id="muscle" ref="muscle">       <option value="all">all</option>       <option repeat.for="muscle of musclefilters" value.bind="muscle">${muscle}</option>    </select> </div> 

display

<div class="col-sm-6 col-md-3" repeat.for="exercise of exercises | sortmuscle:muscle.value"> ${exercise.title} </div> 

sorting function

export class sortmusclevalueconverter {   toview(array, propertyname) {     return array       .slice(0).filter(function (i) {           return (i.muscle === propertyname);       });   } } 

how can display data when 'all' option selected? have search function needs clear filters when submitted can search data.

thank's in advance.

you can use simple if statement in value converter:

// note: convertor name misleading - filtering, not sorting export class sortmusclevalueconverter {   toview(array, propertyname) {     if (propertyname === 'all') {       return array;     }      // simplified filter     return array.filter(i => i.muscle === propertyname);   } } 

---

as alternative, here's generic filtervalueconverter can use filter on property (using equality):

export class filtervalueconverter {   toview(array, propertyname, filter) {     if (!filter) {       return array;     }      return array.filter(item => item[propertyname] === filter);   } } 

usage:

<!-- option needs have empty value --> <option value="">all</option>  <div class="col-sm-6 col-md-3"       repeat.for="exercise of exercises | filter:'muscle':muscle.value">   ${exercise.title} </div>