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...
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