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

时间:2019-04-23 20:15:09

标签: javascript html css xml dom

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

这是我的XML,所需结果是一个包含2行的表。第一行具有错误消息的三列,第二行具有“空”的三列:

 @SpringBootApplication
        (
                scanBasePackages = {
                        "com.package1",
                        "com.package2"
                },
                exclude = {org.springframework.boot.sample.class}
        )

我一直在研究W3Schools的示例,但是由于我的XML结构不同,所以我一直在尝试根据自己的需要对其进行修改。

我的问题是,当我需要它提供@SpringBootApplication(exclude= {com.package1.class}) public class MySpringConfiguration {} 节点值时,我的HTML表的每个单元格都为“ null”。因此,我认为我错误地检索了XML值(在for循环中)。我对Xpath有一定的经验,但是没有通过Javascript / HTML获得节点值。

这是我的HTML / Javascript

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

很抱歉,如果这是一个罗y的问题,应该很简单

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

1 个答案:

答案 0 :(得分: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>