2

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/) from the docs.

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 want to grab the rows in the data array that match the search string and filter the original data 'data' by the search string before redisplaying the table. This partially works using:

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

    console.log(queryResult);
    rows = getRowsFromObjects(queryResult);
    console.log('hot', hot.getData());
    console.log('data', data);
    var data = hot.getData();
    var filtered = data.filter(function(d, ix) { return rows.indexOf(ix) >= 0; });
    console.log('filtered', filtered);

    hot.loadData(filtered);


});

As you can see in http://jsfiddle.net/uL3L4teL/2/ , but I need to replace

var data = hot.getData();

(a handsontable function which gets the current data in the table) with the global 'data' (defined at the top) for the searching to work. But the global data is undefined in the function. How can I fix this?

user1592380
  • 34,265
  • 92
  • 284
  • 515
  • 1
    `var data;` is hoisted to the top and the variable will be undefined, until the `data = hot.getData()` line is reached. Use a different variable name, or `window.data` if it's a global variable. – Niet the Dark Absol Jan 16 '16 at 12:53
  • Possible duplicate of [Surprised that global variable has undefined value in JavaScript](http://stackoverflow.com/questions/9085839/surprised-that-global-variable-has-undefined-value-in-javascript) – JJJ Jan 16 '16 at 12:55

1 Answers1

0

If the "global" data variable that you are referring to "at the top" is this one

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

then that is not global. That variable is local to the DOMContentLoaded event handler function. I presume even though you declare the other event handlers within that same block, they are being called with a different scope, making that variable unavailable. As was suggested in a comment, you can assign it to a global variable like window, or just declare it in a global scope.

Vale H
  • 491
  • 5
  • 16
  • Thanks for explaining that. – user1592380 Jan 16 '16 at 13:41
  • This is not true. It *is* in the same scope, but as Niet explains in the comments, there's another variable with the same name that shadows the "global" variable. – JJJ Jan 16 '16 at 13:44
  • Juhana is correct, var data = hot.getData(); is shadowing the data variable that I mentioned in my answer. – Vale H Jan 18 '16 at 16:11