How to add multiple children to parent using Json2HTML library

Question

I want to add multiple children to parent using json2html.

jsonTestSuiteTemplate={
        "testSuiteNames": [{"testSuiteName": "TS1"}],
    };
var testSuiteHtmlTemplate = {
  "tag": "table",
  "border":"0",
  "children": [{"tag": "tr",
       "children": [{
          "tag": "td",

          "children": [{
              "tag": "ul",
              "class": "report",
              "children":[{
              "tag":"LI",
              "nowrap":"false",
              "class":"closed",
              "children": 
              [{
                   "tag":"a",
                   "href":"#testsuite",
                   "onclick":function(){ return toggle(this);},
                    "children":[{
                        "tag":"big",
                            "children":[{
                                "tag":"font",
                                "color":"green",
                                'html':"ts1 - TS (ok)"}           
                                }] //End of font tag
                                }]  //End of big tag               
              }], //End of Anchor Tag  
                {        
                           "children":[{
                          "tag":"LI",
                          "nowrap":"false",
                          "class":"closed",
                          "children": 
              [{
                   "tag":"a",
                   "href":"#testsuite",
                   "onclick":function(){ return toggle(this);},
                    "children":[{
                        "tag":"big",
                            "children":[{
                                "tag":"font",
                                "color":"green",
                                'html':"t1 - TC (ok)"}            
                                }] //End of font tag
                                }]  //End of big tag               
              }]
                           }] //End of inner List
                }   
               }]  // End of Link tag

             }]   //End of UI tag
        }]  // End of TD tag

    }]  // End of TR tag 
};
    var result = json2html.transform(jsonTestSuiteTemplate, testSuiteHtmlTemplate);

HTML given by the JSON2Html library

<table border="0"><tr><td><ul class="report"><LI nowrap="false" class="closed"><LI nowrap="false" class="closed"><a href="#testsuite"><big><font color="green">TS1</font></big></a></LI></LI></ul></td></tr></table>

But I want HTMl like this:

<table border="0">
               <tr>
                 <td>
                    <ul class="report">
                       <LI nowrap="true" class="closed">
                          <A HREF="#testsuite" onclick="toggle(this)"><big><font color="green">ts1 - TS (ok)</font></big></A> - 0:00:03.800
                          <ul>
                             <LI nowrap="true" class="closed">
                                <A HREF="#testcase" onclick="toggle(this)"><big><font color="green">t1 - TC (ok)</font></big></A> - 0:00:03.800
                             </LI>
                          </ul>
                       </LI>
                    </ul>
                 </td>
              </tr>
           </table>
        </td>
     </tr>
  </table>

I am new to json2Html library finding difficult to add multiple children to same parent.Any help is much appreciated!

Answer 1

If you're having trouble with building the transform, try using the transform builder

JSON2HTML Transform Builder Click on "Builder" tab

Here's the transform I get for your html, I've edited it to include the proper syntax for jquery events. Also if you're using events make sure to include the jquery plugin jquery.json2html.js

{"tag":"table","border":"0","children":[
{"tag":"tbody","children":[
    {"tag":"tr","children":[
        {"tag":"td","children":[
            {"tag":"ul","class":"report","children":[
                {"tag":"li","nowrap":"true","class":"closed","children":[
                    {"tag":"a","href":"#testsuite","onclick":function(){toggle(this);},"children":[
                        {"tag":"big","children":[
                            {"tag":"font","color":"green","html":"ts1 - TS (ok)"}
                          ]}
                      ]},
                    {"tag":"ul","children":[
                        {"tag":"li","nowrap":"true","class":"closed","children":[
                            {"tag":"a","href":"#testcase","onclick":function(){toggle(this);},"children":[
                                {"tag":"big","children":[
                                    {"tag":"font","color":"green","html":"t1 - TC (ok)"}
                                  ]}
                              ]}
                          ]}
                      ]}
                  ]}
              ]}
          ]}
      ]}
  ]}

]}

Answer 2

var jsonTestSuiteTemplate={
        "testSuiteNames": [{"testSuiteName": "TS1"},
                         ],
    };
var testSuiteHtmlTemplate = {
  "tag": "table",
  "border":"0",
  "children": [{"tag": "tr",
       "children": [{
          "tag": "td",

          "children": [{
              "tag": "ul",
              "class": "report",
              "children":[{
              "tag":"LI",
              "nowrap":"false",
              "class":"closed",
              "children": 
              [{  //First Child
                   "tag":"a",
                   "href":"#testsuite",
                   "onclick":function(){ return toggle(this);},
                    "children":[{
                        "tag":"big",
                            "children":[{
                                "tag":"font",
                                "color":"green",
                                'html':function()
                                {
                                    return this.testSuiteName;
                                }
                                }] //End of font tag
                                }]  //End of big tag               
              }]
              }, //End of Anchor Tag and End of First Child
                {        //Second child

                           "children":[{
                          "tag":"LI",
                          "nowrap":"false",
                          "class":"closed",
                          "children": 
              [{
                   "tag":"a",
                   "href":"#testsuite",
                   "onclick":function(){ return toggle(this);},
                    "children":[{
                        "tag":"big",
                            "children":[{
                                "tag":"font",
                                "color":"green",
                                'html':"t1 - TC (ok)"

                                }] //End of font tag
                                }]  //End of big tag               
              }]
                           }] //End of inner List

               }   // Second child

           ]  // End of Link tag

             }]   //End of UI tag
        }]  // End of TD tag

    }]  // End of TR tag 
};