如何使用Json2HTML庫向父級添加多個子級

Question

我想使用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);

JSON2Html庫提供的HTML

<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>

但是我想要這樣的HTMl：

<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>

我是json2Html庫的新手，發現很難將多個子代添加到同一父代中。任何幫助將不勝感激！

Answer 1

如果您在構建轉換時遇到問題，請嘗試使用轉換生成器

JSON2HTML轉換生成器單擊“生成器”選項卡

這是我為您的html獲得的轉換，我對其進行了編輯，以包括針對jquery事件的正確語法。 另外，如果您使用事件，請確保包括jquery插件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 
};