Adding function into JSON object

Question

I have JSON object; let’s call it model; which has 2 properties of type array. The model also has a function “hasAnyFilterSelected” that checks if any of the array property is populated.I have search button & 2 drop downlist on the UI. When user clicks on search button, there are steps that occurs:

1>Push the selected values from the drop down list into model’s array properties.

2>model.hasAnyFilterSelected() checks if any of the array has values, in debugger I see the model is populated with values.

3>If yes, then refresh the kendo grid by executing datasource.read()

4>kendo grid calls “getFilters” method which returns model, again in debugger I see the model is populated with values.

5>Then somehow hasAnyFilterSelected() gets called again and this time model array properties are undefined. It looks like kendo is trying serialize the model again and this time model has different instance but im not sure.

$(function () {

    var model = {
        selectedTaxYears: [], 
        selectedStates: [],

        hasAnyFilterSelected: function () {
            return !(this.selectedTaxYears.length == 0 &&                 
                this.selectedStates.length == 0)
        }
    };    

    $_btnSearch.click(function () {
        pushFilters();
        if (model.hasAnyFilterSelected()) // this returns true when array is populated. In debugger I could see its populated
        {
            $(gridID).data("kendoGrid").dataSource.read(); 
            // fails at above line when dataSource reads
            // it calls getFilters method as expected, I see model is populated.
            // then it calls hasAnyFilterSelected() function again, ( don’t know why) and at this time selectedTaxYears & selectedStates is undefined, so it fails
            // In debugger I DO NOT see model is populated. So looks like different instance of model

            $(gridID).data('kendoGrid').refresh();
        }   
    });


    function pushFilters() {
      model.selectedTaxYears = $_taxYears.val(); 
      model.selectedStates = $_stateProvience.val();       
    }    

    function getFilters() {
            return model;
        }

    var dataSource = $_grid.data("kendoGrid").dataSource;
    dataSource.transport.options.read.data = getFilters;
})

I would like to know why this is happening? am I defining the JSON function properly? is that preferred approach?

Answer 1

If I understand properly, your values are retained, but your function is being overwritten or ignored somehow? (Probably when being copied somewhere, as you point out.) Don't know if this first step will work, but possibly try writing it as a more definitive class with a prototype function:

var model_class = function() {
    this.selectedTaxYears = []; 
    this.selectedStates = [];
}
model_class.prototype = {
    hasAnyFilterSelected: function () {
        return !(this.selectedTaxYears.length == 0 &&                 
            this.selectedStates.length == 0)
}
var model = new model_class();

If THAT gets overwritten, an alternative would be to define that function elsewhere in a singleton library or just on the 'window' scope, and then call it using '.apply':

if ( model_hasAnyFilterSelected.apply( this ) ) {
    //// etc
}