How to make Dynamic String with this Keyword

Question

I want to call this function on click but I need to call this function this.handlingRecursiveTable(arg1, arg2) like this... but when I use this gives me an error.

if I using like this... this gives me TypeError but I need to call the function with this keyword.

 recursiveTable  +=  "<td><input type='button' value='Show Data' onclick='this.handlingRecursiveTable("+stringifyData+", \""+newId+"\")'></td>"

How to make this Dynamic String with this Keyword.

My Whole code is

supportedKey = (key) =>{
    var newkey ="";
      for(i=1; i<key.length; i++){
          if(key.charCodeAt(i)>=65 && key.charCodeAt(i)<=90){
              newkey = newkey + " " + key[i];
          }else newkey = newkey + key[i];
      }
      return key[0].toUpperCase() + newkey
    }




    var str = '';
    handlingRecursiveTable = (arrayOfData, newId)=>{


       var qqqq = document.getElementById(newId)
       if(qqqq==null){ 

        var zz = newId;
        var a = newId.indexOf("*");
            a = newId.substring(0, a);
        var table =  document.getElementById(a);

        var recursiveTable = '';
        recursiveTable +=   "<table id="+zz+" border = '1'>" + '<tr>';

        for(let key in arrayOfData){
            for(let keyAgain in arrayOfData[key]){
                     recursiveTable +=  '<th>' + supportedKey(keyAgain) + '</th>';
            }
        }

        recursiveTable +=  '</tr><tr>';

        for(let key in arrayOfData){
           for(let keyAgain in arrayOfData[key]){

               if(Array.isArray(arrayOfData[key][keyAgain])){
                 var stringifyData = JSON.stringify(arrayOfData[key][keyAgain]);
                 newId = newId + 's';
                 recursiveTable  +=  "<td><input type='button' value='Show Data' onclick='this.handlingRecursiveTable("+stringifyData+", \""+newId+"\")'></td>"
               }else{
                    recursiveTable +=  '<td>' + arrayOfData[key][keyAgain] + '</td>';
               }
           }
       }

        recursiveTable  +=  '</tr>'  + "</table border = '1'>"
        table.innerHTML = table.innerHTML + recursiveTable;
       }

       else{
           console.log('pahle')
       }
    }
    
    



    renderData = (user) =>{
        var data = document.getElementById('data')
        for(let key in user){
             if (Array.isArray(user[key])){
                data.innerHTML = data.innerHTML + '<p>'+supportedKey(key) +'-------</p>'
                data.innerHTML = data.innerHTML + '<div id= '+str+'s'+'></div>'
                handlingRecursiveTable(user[key], str + 's' + '*')
                str= str + 's';
             }else{
                 data.innerHTML = data.innerHTML + '<p>'+supportedKey(key) +'-------' + user[key] + '</p>'
             }
        }
    }
    
    const user = {
        
        "nodeOne": [
        {"shikharJindal": "06/07/2020Jindal"},
        {"mohitSindalJindal": 1231234567890},
        {"elementSeven": [
            {"qqqqUip": "06/07/2020Jindal"},
            {"ssssDip": [
                {"new1": "Newwwwwwww111"},
                {"new2": "neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"}]
            },
        ]}
        ],  
        "nodeTwo": "05/06/2020",
        "nodeThree": 777,
        "nodeFour": [
            {"elementOne": "B Street"},
            {"elementTwo": "City"},
            {"elementThree": "Area - 591323"},
            {"elementFour": [
                {"elementFive": "06/07/2020"},
                {"elementSix": 123},
                {"elementSeven": [
                    {"qqqqUip": "06/07/2020Jindal"},
                    {"ssssDip": 1231234567890}
                ]},
            ]}
        ],
        "nodeFive" : "shubham Jindalaaaaaaaaaaaaaaaaaaaaaaaaaa"
    }
    
   renderData(user);

Answer 1

this in an onclick attribute of a button will be the button and not whatever object you are dealing with in the function that the line of code you shared appears in.

Do not try to generate JavaScript embedded in HTML by mashing strings together in JavaScript.

• It is hard to read
• It is hard to debug
• It runs in a different scope
• It is easy to make errors by failing to property escape data

Use DOM methods instead.

const td = document.createElement("td");
const button = document.createElement("input");
button.type = "button";
button.value = "Show Data";
button.addEventListener("click", event => this.handlingRecursiveTable(stringifyData, newId));
td.appendChild(button);
tr.appendChild(td); // Define tr first