Can't call helper function from helper inside list forEach

Question

I have the following code:

setDataTG : function(component){
    var data = [], tgdata = [], current, row, picklistMAP = component.get("v.picklistMAP"), dataComplex = component.get("v.dataComplex");
    dataComplex.forEach(function(d){
        row = {};
        //Parse data
        if(d.hasOwnProperty('neOrderItem')){
            current = d.neOrderItem;
            Object.keys(current).forEach(function(k){
                if(k === 'NE__ProdName__c'){
                    row['NE__ProdName__c'] = current['Name'] + ' - ' + current['NE__ProdName__c'];
                }    
                else if(k === 'NE__Status__c'){
                    row['NE__Status__c'] = picklistMAP[current['NE__Status__c']];
                }
                else{
                    row[k] = current[k];
                }
            });
        }
        //Check children
        if(d.hasOwnProperty('children')){
            data["_children"] = this.setDataTGChildrenHelper(component, d.children);
        }
        data.push(row)
        tgdata.push(row);
    });
    console.log('****complex: ' + JSON.stringify(data));
    component.set("v.data", data);
    component.set("v.tgdata", tgdata);
    component.set("v.isLoading", false);
},

And it's not letting me call setDataTGChildrenHelper giving me the following error:

[Cannot read property 'setDataTGChildrenHelper' of undefined]

How can I fix this?

Answer 1

This is the case of lexical scoping. You limiting the scope of callback function by using function(). Instead change it to below:

dataComplex.forEach((d) => {

Arrow function does'nt has its own scope and so will get the scope of parent object.

Answer 2

A simple and fairly easy to understand approach is to just alias this. The upshot is this approach still works if you have to support IE11.

const that = this;
someCollection.forEach(function (element) {
    that.otherHelper();
})

Answer 3

Or you can use .bind(this);

  dataComplex.forEach(function(d){
        row = {};
        //Parse data
        if(d.hasOwnProperty('neOrderItem')){
            current = d.neOrderItem;
            Object.keys(current).forEach(function(k){
                if(k === 'NE__ProdName__c'){
                    row['NE__ProdName__c'] = current['Name'] + ' - ' + current['NE__ProdName__c'];
                }    
                else if(k === 'NE__Status__c'){
                    row['NE__Status__c'] = picklistMAP[current['NE__Status__c']];
                }
                else{
                    row[k] = current[k];
                }
            }).bind(this);
        }
        //Check children
        if(d.hasOwnProperty('children')){
            data["_children"] = this.setDataTGChildrenHelper(component, d.children);
        }
        data.push(row)
        tgdata.push(row);
    }).bind(this);

Answer 4

You can pass helper parameter into each helper function and thus you can call one helper function from another.

Example: helper1: function(component, event, helper){ this.helper2(); },

helper2:function(component, event, helper){ //helper 2 logic here }