javascript - 如何在json2html库中使用li标签

Question

我正在使用 Json2Html 将 json 转换为 Html。我发现使用 li 标签有困难。非常感谢任何帮助。

 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 :

 <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格式是

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

请帮我删除 json2html 转换中多余的 li 标记。

Answer 1

尝试下面的代码。

    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}"
         }]
     }
  };

希望这对您有帮助。