如何在 HTML 表格中显示此 XML 数据？答案

【问题标题】：How do I display this XML data in an HTML table?如何在 HTML 表格中显示此 XML 数据？
【发布时间】：2019-09-13 02:02:40
【问题描述】：

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

这是我的 XML，想要的结果是一个有 2 行的表。第一行有 3 列带有错误消息，第二行有 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】：

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

【讨论】：