Filter dom-repeat's elements, where values are generated by function

Question

I know how to filter dom-repeat's list, but If dom-repeat's values are generated by a function then those values are not present in properties.so in _computeFilter function I can't use any sub-property to match filter.

 <template is="dom-repeat" items="{{membersList}}" as="usersList" filter="{{_computeFilter(searchUser)}}">
 <div class="name">
   [[_getFullName(usersList.firstName,usersList.lastName)]]
 </div>
 <div>
   [[_getMobileNumber(usersList.fields)]]</div>
</template>

In the above code in _getMobileNumber function I'm passing an array, then In that array I'll search for a mobile number then I'll return back to dom-repeat.Now how I can filter based on Mobile number since its returned by a function!!

Answer 1

I can think of three options:

1) Mutate the elements of memberList, adding fullName and mobileNumber properties

this.memberList.forEach(userList => {
  userList.fullName = this._getFullName(usersList.firstName,usersList.lastName);
  userList.mobileNumber = this._getMobileNumber(usersList.fields);
}

2) Create a new list, with new objects, that either

a) are copies of the old objects, with new properties

b) are wrappers around old objects, plus new properties

  this.newList = this.memberList.map(userList => {
   return {
     userList: userList,
     fullName: this._getFullName(usersList.firstName,usersList.lastName),
     mobileNumber: this._getMobileNumber(usersList.fields)
   }
}

3) Just use the method _getMobileNumber inside the filter function

_computeFilter: function(item) {
  return this._getMobileNumber(item.fields) == SOMETHING
}