How to use li tag in json2html library

Question

I am using Json2Html for converting json to Html .I am finding difficulty in using li tag.Any help is greatly appreciated.

 var data = [{
      "testSuite": [{
          "testCase": [{
              "testCaseName": "tc1",
              "testStep": [{
                  "result": "true",
                  "testStepName": "ts1",
                  "screenShot": "image"
                }, {
                  "result": "true",
                  "testStepName": "ts2",
                  "screenShot": "image"
                }] //End of TestStep
            },

          ],
          "testSuiteName": "testSuite1",
        }] // End of testSuite
    }];

var transform = {
    // Printing the Execution stack 

    "testSuite": {

      "tag": "ul",
      "children": function() {

        return (json2html.transform(this.testSuite, transform.testSuiteName));
      }
    },
    "testSuiteName": {
      "tag": "li",
      "html": "${testSuiteName}",
      "children": function() {
        return ('<ul>' + json2html.transform(this.testCase, transform.testCaseNameRetrieval) + '</ul>');
      }
    },

    "testCaseNameRetrieval": {
      "tag": "li",

      "children": function() {
        return (json2html.transform(this, transform.testCaseName));
      }
    },

    "testCaseName": {
      "tag": "li",
      "html": "${testCaseName}",
      "children": function() {
        return (json2html.transform(this.testStep, transform.testStepRetrieval));
      }
    },

    "testStepRetrieval": {
      "tag": "li",
      "children": function() {
        return ('<ul>' + json2html.transform(this, transform.testStep) + '</ul>');
      }
    },

    "testStep": {
      "tag": "li",

      "html": "${testStepName}",
      "children":

        return ('<ul>' + json2html.transform(this, transform.testStepResultDescription) + '</ul>');
    }

  },


  "testStepResultDescription": {
    "tag": "li",
    "children": [{
      "tag": "div",
      "html": "${screenShot}               -              ${result}"
    }]
  }
}; //End of HTML template definition(transform)

$('#json').json2html(data, transform.testSuite);

Html generated from the above transition :

 <li>
       testSuite1
       <ul>
          <li>
          <li>tc1
          <li> 
             <ul>
                <li>
                   ts1
                   <ul>
                      <li>
                         <div>image               -              true</div>
                      </li>
                   </ul>
                </li>
             </ul>
          </li> 
          <li>
             <ul>
                <li>
                   ts2
                   <ul>
                      <li>
                         <div>image               -              true</div>
                      </li>
                   </ul>
                </li>
             </ul>
          </li>
          </li></li>
       </ul>
    </li>

Html format which I want is

<li>
   testSuite1
   <ul>
        <li>tc1
         <ul>
            <li>
               ts1
               <ul>
                  <li>
                     <div>image               -              true</div>
                  </li>
               </ul>
            </li>
         </ul>
<ul>
            <li>
               ts2
               <ul>
                  <li>
                     <div>image               -              true</div>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
       </ul>
</li>

Please help me to remove the extra li tag in the json2html transition.

Answer 1

Try this below code.

    var data = [{
      "testSuite": [{
          "testCase": [{
            "testCaseName": "tc1",
            "testStep": [{
                "result": "true",
                "testStepName": "ts1",
                "screenShot": "image"
              }, {
                "result": "true",
                "testStepName": "ts2",
                "screenShot": "image"
              }] //End of TestStep
          }, ],
          "testSuiteName": "testSuite1",
        }] // End of testSuite
    }];

    var transform = {
    // Printing the Execution stack 

        "testSuite": {
            "tag": "ul",
            "children": function() {
                return (json2html.transform(this.testSuite, transform.testSuiteName));
            }
        },

        "testSuiteName": {
            "tag": "li",
            "html": "${testSuiteName}",
            "children": function() {
                return ('<ul>' +json2html.transform(this.testCase, transform.testCaseName) + '</ul>');
            }
        },

        "testCaseName": {
            "tag": "li",
            "html": "${testCaseName}",
            "children": function() {
                return (json2html.transform(this.testStep, transform.testStepRetrieval));
            }
        },

        "testStepRetrieval": {
            "tag": "ul",
            "children": function() {
                return (json2html.transform(this, transform.testStep));
            }
        },

        "testStep": {
            "tag": "li",
            "html": "${testStepName}",
            "children":function(){
              return ('<ul>' + json2html.transform(this, transform.testStepResultDescription) + '</ul>');
             }
         },


    "testStepResultDescription": {
        "tag": "li",
        "children": [{
            "tag": "div",
            "html": "${screenShot}               -              ${result}"
         }]
     }
  };

Hope this will help you.