I am trying to call the following function recursively.
public getData(key,value){
this.htmlString += '<span style="color:cornflowerblue">'+key+' </span>:';
if(value instanceof Object){
Object.keys(value).forEach(function (keydata) {
let obj = value[keydata];
this.getData(keydata,value[keydata]);
console.log(key,obj,obj instanceof Object)
});
}else{
this.htmlString += '<span>'+value+'</span>';
}
return this.htmlString;
};
when i tried to call teh function it was showing an error " Cannot read property 'getData' of undefined. Is there any wrong in the code or any other way to do this.
forEach accepts a callback, which is an anonymous function, and this inside anonymous function refers to window in non-strict mode or undefined in strict mode.
You need to bind context:
Object.keys(value).forEach(function (keydata) {
let obj = value[keydata];
this.getData(keydata,value[keydata]);
console.log(key,obj,obj instanceof Object)
}.bind(this));
or use an arrow function:
Object.keys(value).forEach((keydata) => {
let obj = value[keydata];
this.getData(keydata,value[keydata]);
console.log(key,obj,obj instanceof Object)
});
or simply pass pointer to this as a second argument to forEach:
Object.keys(value).forEach(function (keydata) {
let obj = value[keydata];
this.getData(keydata,value[keydata]);
console.log(key,obj,obj instanceof Object)
}, this);