Vanilla Javascript和XML-循环问题

Question

我遇到了一个我无法完全把握的怪异错误。 我认为这是堆叠的for循环的问题，但我不确定。 这是我的简短说明：

我正在阅读使用Vanilla Javascript的XML文件，并以HTML（当前）显示信息，以查看我的代码是否有效。

每个条目都以HTML格式显示在表格行中。 “名称”得到它自己的“ TD”，“关键字”也得到它。 现在，我想在“ OL”中将每个“步骤”显示为“ LI”。

它应该为每个元素“描述”创建一个OL，但是它为每个元素“描述”创建OL，并将两个OL推入一个TD。

结果是：两个OL都包含2个TD。

我是不正确地堆叠了for循环还是犯了另一个错误？

 var getDESC = document.getElementsByTagName("description"); var tblROW = document.createElement("TR"); var tblDATA = document.createElement("TD"); var tbl = document.getElementById("tbl"); var k; for (k = 0; k < getDESC.length; k++) { var createOL = document.createElement('OL'); var l; for (l = 0; l < getDESC[k].getElementsByTagName("step").length; l++) { var createLI = document.createElement("LI"); var createStep = ''; createStep = document.createTextNode(getDESC[k].getElementsByTagName("step")[l].childNodes[0].nodeValue); createLI.appendChild(createStep); createOL.appendChild(createLI); } tblDATA.appendChild(createOL); tblROW.appendChild(tblDATA); } tbl.appendChild(tblROW); 

 <content> <entry> <name></name> <keywords></keywords> <description> <step>Text 1</step> <step>Text 2</step> <step>Text 3</step> </description> </entry> <entry> <name></name> <keywords></keywords> <description> <step>Text 1</step> <step>Text 2</step> <step>Text 3</step> </description> </entry> </content> <table> <tbody id="tbl"></tbody></table> 

预期产量：

<table>
 <tr>
  <td>Name</td>
  <td>Keywords</td>
  <td>
   <ol>"Orderered list for entry #1"</ol>
  </td>
 </tr>
 <tr>
  <td>Name</td>
  <td>Keywords</td>
  <td>
   <ol>"Orderered list for entry #2"</ol>
  </td>
 </tr>
</table>

我的输出：

<table>
 <tr>
  <td>Name for entry #1</td>
  <td>Keywords for entry #1</td>
  <td>
   <ol>"Orderered list for entry #1"</ol>
   <ol>"Orderered list for entry #2"</ol>
  </td>
 </tr>
 <tr>
  <td>Name for entry #2"</td>
  <td>Keywords for entry #2"</td>
  <td>
   <ol>"Orderered list for entry #1"</ol>
   <ol>"Orderered list for entry #2"</ol>
  </td>
 </tr>
</table>

更新（09.05.2018）：

我喜欢下面发布的方法，并且正在尝试使其有效。 它尚不能正常工作，但我将首先发布Javascript：

我有一个函数“ loadXML（）”可以做到这一点（“ sO（this）;”调用该函数来创建表等）：

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      sO(this);
    }
  };
  xmlhttp.open("GET", "content.xml", true);
  xmlhttp.send();
}

我更改了main函数的变量以包含我的外部XML文件：

function sO(xml){
//following line should load the XML-File
var xml = xml.responseXML;
var xmlObject = document.createRange().createContextualFragment(xml);
document.body.appendChild(document.createElement("h1")).textContent = "XML";
document.body.appendChild(document.createElement("pre")).textContent = xml;
...

预期结果将类似于您在下面的注释中看到的表。 但是我的输出是：[对象XMLDocument]。 我猜“ CreateContextualFragment（）”方法无法正确读取XML文件，但是我不确定这是否真的是错误的。 屏幕截图

最终更新：我发现了错误。 我必须添加

xmlhttp.dataType = "text";  

到我的loadXML（）并更改

var xml = xml.responseXML;  

至

var xml = xml.response;  

现在工作正常。 感谢您的帮助！

Answer 1

我认为您的问题源于document.getElementsByTagName 。 而不是引用文档，您应该将搜索本地化到任何给定的entry 。

这是我对您的问题的看法：

 //XML var xml = "<content>\\n<entry>\\n <name>Name1</name>\\n <keywords>key_1 key_3 key_4</keywords>\\n <description>\\n\\t<step>Text 1</step>\\n\\t<step>Text 2</step>\\n\\t<step>Text 3</step>\\n </description>\\n</entry>\\n<entry>\\n <name>Name2</name>\\n <keywords>key_2</keywords>\\n <description>\\n\\t<step>Text 1</step>\\n\\t<step>Text 2</step>\\n </description>\\n</entry>\\n</content>"; var xmlObject = document.createRange().createContextualFragment(xml); document.body.appendChild(document.createElement("h1")).textContent = "XML"; document.body.appendChild(document.createElement("pre")).textContent = xml; //Table document.body.appendChild(document.createElement("h1")).textContent = "HTML"; var table = document.body.appendChild(document.createElement("table")); table.innerHTML = "<tr><th>name</th><th>keywords</th><th>description</th></tr>"; table.border = "true"; //treat data xmlObject.querySelectorAll("entry") .forEach(function (entry) { var row = document.createElement("tr"); //name row .appendChild(document.createElement("td")) .textContent = entry.querySelector("name").textContent; //keywords row .appendChild(document.createElement("td")) .textContent = entry.querySelector("keywords").textContent; //description var descriptions = row .appendChild(document.createElement("td")) .appendChild(document.createElement("ol")); entry .querySelector("description") .querySelectorAll("step") .forEach(function (step) { descriptions .appendChild(document.createElement("li")) .textContent = step.textContent; }); table.appendChild(row); });