Databases
StackOverflow2013
Postsdbo
POBackbone.js filter on any value in a collection
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.js filter on any value in a collection
    text
    copied!<p>I have a search/filter field that I would like to be able to filter on any value of the collection. The data I have is as follows:</p> <pre><code> exports.administrators = [ { id: 1, firstName: "User1", lastName: "Tester", phone: "781-000-0000", email: "user1.tester@email.com", privileges: "view-only" }, { id: 2, firstName: "Mickey", lastName: "Mouse", phone: "781-123-4567", email: "mickey.mouse@disney.com", privileges: "all" }, { id: 3, firstName: "Snow", lastName: "White", phone: "781-890-1234", email: "snow.white@disney.com", privileges: "all" }, { id: 4, firstName: "Anakin", lastName: "Skywalker", phone: "888-874-9084", email: "anakin.skywalker@deathstar.com", privileges: "view-only" }, { id: 5, firstName: "Obi-one", lastName: "Kenobi", phone: "908-765-5432", email: "obi.kenobi@jedi.com", privileges: "all" }, { id: 6, firstName: "Master", lastName: "Yoda", phone: "876-654-2134", email: "yoda@jedi.com", privileges: "view-only" }, { id: 7, firstName: "Han", lastName: "Solo", phone: "781-456-3209", email: "han.solo@gmail.com", privileges: "all" }, { id: 8, firstName: "Neo", lastName: "TheOne", phone: "781-000-0000", email: "neo@matrix.com", privileges: "all" }]; </code></pre> <p>The View will fire an event based on the keyup event:</p> <pre><code>AdministratorView.prototype.events = { 'click .sub-content th.sort, .sub-content th.sort-up, .sub-content th.sort-down': 'sortTable', 'click .light-btn': 'showAdd', 'keyup #filter-find': 'filterAdministrators' }; </code></pre> <p>I have also abstracted the function that I want to perform the filtering:</p> <pre><code> App.Utils.filterCollection = function(collection, filterValue) { if (filterValue !== "") { return _.filter(collection.models, function(data) { var values; values = _.values(data.attributes); _.each(values, function(value) { if (!isNaN(value)) { value = value.toString(); } return value.indexOf(filterValue) &gt; 0; }); }); } </code></pre> <p>};</p> <p>The problem I have is:</p> <ol> <li>The filterCollection function is returning undefined</li> <li>Is there a more elegant way of doing this?</li> </ol> <p>Thanks for all the help in advance.</p> <p>Cheers,</p> <p>Kianosh</p> <p>Updated function:</p> <p>I have updated the function with some input from @dbaseman</p> <pre><code> App.Utils.filterCollection = function(collection, filterValue) { var filteredCollection; if (filterValue === "") { []; } return filteredCollection = collection.filter(function(data) { return _.some(_.values(data.toJSON()), function(value) { value = !isNaN(value) ? value.toString() : value; return value.indexOf(filterValue) &gt;= 0; }); }); </code></pre> <p>};</p> <p>However I am still getting an empty (or undefined) value from the function. I am stomped!!</p> <p>Update #2 Found a partial solution. Here is the jsFiddle - <a href="http://jsfiddle.net/kianoshp/YWSSp/" rel="nofollow">http://jsfiddle.net/kianoshp/YWSSp/</a>. It filters correctly, however when I blank out the filter field I expect the original data set to be displayed. However now I get a blank table. Working on solution but any help/hint would be helpful.</p> <p>Update #3 Final solution is here in the jsFiddle --> <a href="http://jsfiddle.net/kianoshp/YWSSp/77/" rel="nofollow">http://jsfiddle.net/kianoshp/YWSSp/77/</a> thanks to @dbaseman</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload