How to use onclick in json2html

Question

I am using JSON2HTML library for generating the HTML. I am having the problem with onclick.Following is the snippet of code

 **JavaScript** var data =[ { "testSuite":[ { "testCase":[ { "testCaseName":"Login Succesfull TC (nested error)", "testCaseResult":"false", "testCaseScreenShot":"image", "testCaseTimeStamp":"0:00:13.258", "testStep":[ { "testStepresult":"true", "testStepName":"ub_cti_inputText - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", }, { "testStepresult":"true", "testStepName":"ub_cti_inputText1111111111 - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", }, { "testStepresult":"false", "testStepName":"ub_cti_inputText - TC (nested error)", "testStepScreenShot":"image", "testStepTimeStamp":"0:00:13.258", } ] //End of TestStep }, ], // End of testSuite1 "testSuiteName":"LoginAndTicketStatus_suite - TS (nested error)", "testSuiteResult":"false", "testSuiteTimeStamp":"0:00:15.238" }, ] //End of TestSuite JSON }, ]; //End of data var transform = { "testSuite": { "tag": "ul", "children": function () { return (json2html.transform(this.testSuite, transform.getTestSuiteName)); } }, "getTestSuiteName": { "tag": "li", "nowrap":"true", "class":"closed", "children":[ {"tag":"a","href":"#testSuiteLink", "onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big", "children":[ //Apply font color for result of testSuite {"tag":"font", "color":function() { if(data[0].testSuite[0].testSuiteResult=="true") { return "Green"; } else { return "red"; } }, "html": "${testSuiteName}", }, ] }] }, {"tag":"ul","children":function() { return ( json2html.transform(this.testCase, transform.testCase)); } }] }, "testCase": { "tag": "li", "nowrap":"true", "class":"closed", "children":[ { "tag":"a","href":"#testcase","onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testCaseResult=="true") { return "Green"; } else { return "red"; } },"html":function() { return this.testCaseName; }} ]} ]}, {"tag":"ul","children":function() { return ( json2html.transform(this.testStep, transform.testStep) ); } }] }, "testStep": { "tag": "li", "nowrap":"true", "class":"closed", "onclick":function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"a","href":"#testcase","onclick": function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); }, "children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testStepresult=="true") { return "green"; } else { return "red"; } },"html":function() { for(element in this) { console.log("Element received "+element+" -----44"); return this.testStepName ; } } } ]} ]} , {"tag":"ul","children":[ { "tag":"li","nowrap":"true","class":"closed","children":[ { "tag":"a","href":"#step","onclick":function() { $(this).toggleClass('closed'); $(this).toggleClass('open'); toggle(this); },"children":[ {"tag":"big","children":[ {"tag":"font","color":function() { if(this.testStepresult=="true") { return "Green"; } else { return "red"; } },"html":function() { return this.testStepresult ; } } ]} ]} ]} ]} ]}, }; //End of HTML template definition(transform) $(document).ready(function() { $('#json').json2html(data, transform.testSuite); });

 **Css Styling** body { font-family: monospace; } ul.report, ul.report ul, ul.report li { margin: 0; padding: 0; } ul.report ul { padding-left: 1em; } ul.report li a { text-decoration: none; } a { text-decoration: none; } li::before { content: "⊞" } ul.report li { list-style: none; } { list-style-type: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://json2html.com/js/jquery.json2html.js"></script> <script src="http://json2html.com/js/json2html.js"></script> **HTML** <div id="json" style="width:95%;margin:5%"></div>

Expected Output:

clicking on LoginAndTicketStatus_suite - TS (nested error) toggle Login Succesfull TC (nested error)

Clicking on Login Succesfull TC (nested error) toggle ub_cti_inputText - TC (nested error),ub_cti_inputText1- TC (nested error),ub_cti_inputText - TC (nested error).

Any help is greatly appreciated!

Answer 1

Firstly you might want to try to organize your JSON transform into a more readable format.

Now to your question, since your nesting the core json2html.transform within your transform you'll need to insure that it knows to process events. You can do this by specifying the {events:true} in the options like so

return (json2html.transform(this.testSuite, transform.getTestSuiteName,{'events':true}));

This tells the core library to process jquery events. Otherwise you could just call the jquery plugin on a dummy div element like so

return ($('div').json2html(this.testSuite, transform.getTestSuiteName));

Here's the updated code that will call these events correctly (with both different methods)

var transform = {
    "testSuite": {
        "tag": "ul",
        "children": function () {
        return ($('div').json2html(this.testSuite, transform.getTestSuiteName));
        }
    },
        "getTestSuiteName": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",
      "children":[
          {"tag":"a","href":"#testSuiteLink",
                     "onclick":
        function()
        {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"big",
            "children":[
            //Apply font color for result of testSuite
                {"tag":"font",                  
                "color":function()
                {
    if(data[0].testSuite[0].testSuiteResult=="true")
        {
        return "Green";
        }
        else
        {
        return "red";
        }                   
        },
        "html": "${testSuiteName}",
        },
        ]
        }]
        },
    {"tag":"ul","children":function()
         {
        return ( json2html.transform(this.testCase, transform.testCase,{'events':true}));
        }
        }]          
        },

    "testCase": {
       "tag": "li",
       "nowrap":"true",
       "class":"closed",         
        "children":[
        {
        "tag":"a","href":"#testcase","onclick": function()
        {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },
        "children":[
           {"tag":"big","children":[
           {"tag":"font","color":function()
         {                  
         if(this.testCaseResult=="true")
          {
            return "Green";
         }
            else
            {
            return "red";
            }                   
        },"html":function()
            {
            return this.testCaseName;
            }}
           ]}
         ]},
        {"tag":"ul","children":function()
         {
    return (  json2html.transform(this.testStep, transform.testStep,{'events':true}) );
        }
      }]
    },

    "testStep": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",

        "onclick":function() {
            console.log('here');
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"a","href":"#testcase","onclick": function()
            {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
            },
            "children":[
                {"tag":"big","children":[
                {"tag":"font","color":function()
                {               
                if(this.testStepresult=="true")
                {
                return "green";
                }
                else
                {
                    return "red";
                }

                },"html":function()
                {
                for(element in this) {
            console.log("Element received "+element+" -----44");
            return this.testStepName ;
            }
           }
         }
       ]}
     ]}                               ,
    {"tag":"ul","children":[                                    
    {
     "tag":"li","nowrap":"true","class":"closed","children":[
    {
      "tag":"a","href":"#step","onclick":function()
    {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },"children":[
        {"tag":"big","children":[
        {"tag":"font","color":function()
        {                   
          if(this.testStepresult=="true")
            {
               return "Green";
            }
        else
        {                       
            return "red";
        }
        },"html":function()
        {
              return this.testStepresult  ;
        }
            }
           ]}
          ]}
         ]}
        ]}
      ]},       
  }; //End of HTML template definition(transform)