如何在HTML表格中显示此XML数据?

问题描述 投票:1回答:1

我有一个大的XML数据集,我只需要某些值。具体来说,我需要一个jmeter测试脚本的断言失败消息。

这是我的XML,所需的结果是一个包含2行的表。第一行有3列带有ERROR消息,第二行有3列带有“null”:

<?xml version="1.0" encoding="UTF-8"?>
<testResults version="1.2">
<httpSample ts="1555683457534" lb="What is cocktail?">
  <assertionResult>
    <name>Intent</name>
    <failure>true</failure>
    <error>false</error>
    <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
  </assertionResult>
  <assertionResult>
    <name>Input</name>
    <failure>true</failure>
    <error>false</error>
    <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
  </assertionResult>
  <assertionResult>
    <name>Entity</name>
    <failure>true</failure>
    <error>false</error>
    <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
  </assertionResult>
</httpSample>
<httpSample ts="1555683467885" lb="What is coconut?">
  <assertionResult>
    <name>Intent</name>
    <failure>false</failure>
    <error>false</error>
    <failureMessage></failureMessage>
  </assertionResult>
  <assertionResult>
    <name>Input</name>
    <failure>false</failure>
    <error>false</error>
    <failureMessage></failureMessage>
  </assertionResult>
  <assertionResult>
    <name>Entity</name>
    <failure>false</failure>
    <error>false</error>
    <failureMessage></failureMessage>
  </assertionResult>
</httpSample>
</testResults>

我一直在研究W3Schools的一个例子,但由于我的XML结构不同,我一直在努力根据自己的需要对其进行修改。

我的问题是我的HTML表格的每个单元格都显示为“null”,当我需要它来给出failureMessage节点值时。所以我相信我正在错误地检索XML值(在for循环中)。我有一些使用Xpath的经验,但没有通过Javascript / HTML获取节点值。

这是我的HTML / Javascript

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <style>
         table,th,td {
         border : 1px solid black;
         border-collapse: collapse;
         }
         th,td {
         padding: 5px;
         }
      </style>
   </head>
   <body>
      <button type="button" onclick="loadXMLDoc()">Get my results</button>
      <br><br>
      <table id="demo"></table>
      <script>
         function loadXMLDoc() {
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              myFunction(this);
            }
          };

          xmlhttp.open("GET", "Assertion_Results.xml", true);
          xmlhttp.send();
         }
         function myFunction(xml) {
          var i;
          var xmlDoc = xml.responseXML;
          var table="<tr><th>Intent</th><th>Input</th><th>Entity</th></tr>";
          var x = xmlDoc.getElementsByTagName("httpSample");
          for (i = 0; i <x.length; i++) {
            table += "<tr><td>" +
            x[i].getElementsByTagName("assertionResult")[0].childNodes[3].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("assertionResult")[1].childNodes[3].nodeValue +
            "</td><td>"+
            x[i].getElementsByTagName("assertionResult")[2].childNodes[3].nodeValue +
            "</td></tr>";
          }
          document.getElementById("demo").innerHTML = table;
         }
      </script>
   </body>
</html>

对不起,如果这是一个应该简单的罗嗦问题

TL; DR:如何从我的XML中获取单个failureMessage字段?

javascript html css xml dom
1个回答
0
投票

可以解析XML的一种方法是使用XSLT转换XML并提取数据。

我将XML和XSLT作为脚本放在HTML中,但您可以从外部资源加载它们。

function transformXML(xmlText, xsltText) {

  if (!(window.DOMParser && window.XSLTProcessor)) {
    return xmlText;
  }
  
  // Load the XSLT into a document
  var xsltDoc = new DOMParser().parseFromString(xsltText, "text/xml");

  var xslt = new XSLTProcessor();
  xslt.importStylesheet(xsltDoc);

  var xml = new DOMParser().parseFromString(xmlText.trim(), "text/xml");

  var transformedXml = xslt.transformToDocument(xml);

  return (!transformedXml) ? xmlText :
    new XMLSerializer().serializeToString(transformedXml);
}

function fnProcess(){
  
  var xmlText = $("#xml").text();
  var xslText = $("#xslt").text();
  var resultText = transformXML(xmlText,xslText);
  
  $("#result").html(resultText);
  
}
#result {padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fnProcess()">Process</button>
<div id="result"></div>

<!-- XML Code Here -->
<script type="text/xml" id="xml">
  <?xml version="1.0"?>
  <testResults version="1.2">
    <httpSample ts="1555683457534" lb="What is cocktail?">
      <assertionResult>
        <name>Intent</name>
        <failure>true</failure>
        <error>false</error>
        <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
      </assertionResult>
      <assertionResult>
        <name>Input</name>
        <failure>true</failure>
        <error>false</error>
        <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
      </assertionResult>
      <assertionResult>
        <name>Entity</name>
        <failure>true</failure>
        <error>false</error>
        <failureMessage>ERROR: THIS IS THE TEXT I NEED IN THE TABLE</failureMessage>
      </assertionResult>
    </httpSample>
    <httpSample ts="1555683467885" lb="What is coconut?">
      <assertionResult>
        <name>Intent</name>
        <failure>false</failure>
        <error>false</error>
        <failureMessage></failureMessage>
      </assertionResult>
      <assertionResult>
        <name>Input</name>
        <failure>false</failure>
        <error>false</error>
        <failureMessage></failureMessage>
      </assertionResult>
      <assertionResult>
        <name>Entity</name>
        <failure>false</failure>
        <error>false</error>
        <failureMessage></failureMessage>
      </assertionResult>
    </httpSample>
  </testResults>
</script>

<!-- XSLT Code Here -->
<script type="text/xml" id="xslt">
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/">
      <table border="1">
        <tr bgcolor="#9acd32">
          <th style="text-align:left">httpSample ts</th>
          <th style="text-align:left">httpSample lb</th>
          <th style="text-align:left">name</th>
          <th style="text-align:left">failure</th>
          <th style="text-align:left">failureMessage</th>
        </tr>
        <xsl:for-each select="testResults/httpSample/assertionResult">
          <xsl:if test="failure = 'true'">
            <tr>
              <td>
                <xsl:value-of select="../@ts" />
              </td>
              <td>
                <xsl:value-of select="../@lb" />
              </td>
              <td>
                <xsl:value-of select="name" />
              </td>
              <td>
                <xsl:value-of select="failure" />
              </td>
              <td>
                <xsl:value-of select="failureMessage" />
              </td>
            </tr>
          </xsl:if>
        </xsl:for-each>
      </table>
    </xsl:template>
  </xsl:stylesheet>
</script>
© www.soinside.com 2019 - 2024. All rights reserved.