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); });