Search code examples
javascriptjqueryarrayshandsontable

Filter array of arrays by row number


enter image description here

I'm working on reproducing a live filter box with handsontable based on the built in search functionality at http://docs.handsontable.com/0.15.0-beta6/demo-search-for-values.html.

Right Now I'm working with the simplest use case (http://jsfiddle.net/kc11/uL3L4teL/1) from the docs.

the data is an array of arrays:

var
data = [
  ['Nissan', 2012, 'black', 'black'],
  ['Nissan', 2013, 'blue', 'blue'],
  ['Chrysler', 2014, 'yellow', 'black'],
  ['Volvo', 2015, 'yellow', 'gray']
],

As explained in the docs, In this code if you enter a search string, you get the matching cells outputted to the console using the following function:

         Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {
                var queryResult = hot.search.query(this.value);

                console.log(queryResult);
                hot.render();

I've modified this like so:

            function getRowsFromObjects(queryResult) {
                rows = [];
                for (var i = 0, l = queryResult.length; i < l; i++) {
                    debugger
                    rows.push(queryResult[i].row);
                }
                console.log('rows',rows);
                return rows;
            }

            Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {

                var queryResult = hot.search.query(this.value);

                console.log(queryResult);
                rows = getRowsFromObjects(queryResult);
                hot.render();
            });

http://jsfiddle.net/kc11/uL3L4teL/1/

The reason for this is to grab the row numbers of the cells that match.

so Now I have 'rows' - the row numbers of the filtered rows and I can get the original data using:

data = hot.getData();

Is there an easy way to filter the data (an array of arrays ) by the row number (i.e.) the index in javascript.

My plan is to then grab the filtered data rows and re-render the table.

edit: because my question may be confusing. here's example:

 data = [a,b,c,d] - the letters are arrays
 rows = [0,1],

I'd like to apply a filter so the output is

data = [a,b]

Solution

  • You can do that with a fairly simple Array.prototype.filter call:

    // Setup...
    var data = [], indexes = [1, 3, 5, 7, 8, 9];
    
    for(var i = 0; i < 15; i++) {
      data.push('item #' + i);
    }
    
    // This is where the magic happens
    var filtered = data.filter(function(d, ix) { return indexes.indexOf(ix) >= 0; });
    
    // Output...
    document.write('<pre>' + JSON.stringify(filtered) + '<\pre>');

    Alternatively, you can reverse the logic and do that with a Array.prototype.map call for better performance but less coherent code:

    // Setup...
    var data = [], indexes = [1, 3, 5, 7, 8, 9];
    
    for(var i = 0; i < 15; i++) {
      data.push('item #' + i);
    }
    
    // This is where the magic happens
    var filtered = indexes.map(function(i) { return data[i]; });
    
    // Output...
    document.write('<pre>' + JSON.stringify(filtered) + '<\pre>');