声明的函数未调用

Question

I have a function to fetch my data from backend. once the data is loaded i am calling a function which is sent as callback. but i am getting error as undefined not a function

here is the code:

var initDataTable = function () {

      var getDableData = function (url,callback) {
            $.getJSON(url)
              .then(function (data) {
                callback(data);
            });
      };

      return {

        init : function (dataAssests) {
          this.container = dataAssests.container;
          this.headerNames = dataAssests.names;          
          getDableData(dataAssests.url, this.dataReceiver); //getting required data
        },

        dataReceiver : function (data) {
            this.tableData = data;
            this.tableMaker(); //not calling error Uncaught TypeError: undefined is not a function.
        },

        tableMaker : function () {
          console.log(this.tableData);
        }

      };
};

//tabular data starts...
var dataAssests = {
                    container: $('.dataTable'), 
                    url : 'https://tcs.firebaseio.com/d/DocPageDetails/d/Organizations.json', 
                    names : ['Organization Name', 'Zip Code', 'Telephone', 'Organization TypeName' ]
                  };

var dataTableFrist = initDataTable().init(dataAssests);
//tabular data ends...

jsfiddle

Answer 1

The problem is not that callback is not defined, it is inside dataReceiver where this is not referring to the object what you are expecting.

Since you are invoking the callback without a context, this inside dataReceiver is referring to the window object so this.tableMaker is undefined thus the error.

One possible solution is to use Function.bind() to pass a custom execution context to the callback method

getDableData(dataAssests.url, this.dataReceiver.bind(this));

Demo: Fiddle