將AJAX的內嵌XML轉換爲HTML

我有一個網頁，允許用戶從下拉列表中選擇一個類別。該類別涉及從AJAX中的XML文件派生的表。我打算使用一些JS代碼來讀取XML文件的內容並根據其中的值創建表。（換句話說，XML文件可以創建具有完全不同列的表，這就是爲什麼我不想硬編碼任何東西，而是希望以編程方式構建它。）我也不想使用XSLT或任何其他將創建第二組文件的方法;所使用的XML文件將被視爲「真相的來源」。將AJAX的內嵌XML轉換爲HTML

我可以得到一個XML文件加載，但我很難瀏覽結構，以便從第一個子元素讀取列名稱。

<xml> 
<item> 
    <number>Number</number> 
    <image>Image</image> 
</item> 
<item> 
    <number>123</number> 
    <image>123.jpg</image> 
</item> 
</xml>

我希望能夠讀取第一組<item>元素，並使用其文本值來生成表格中的<th>元素。然後用XML內容的其餘部分填寫表格。

我已經嘗試過項目[0] .childNodes [0]，但它會選擇換行符（我不想從XML源文件中刪除）。我也試過物品[0] .children [0]，但我得到「無法獲取未定義或空引用的屬性'0'」。

這裏是我的代碼至今：

const vPathToJSON = "../JSON/"; 
const vPathToXML = "../XML/"; 

var vCategoriesJSON = "categoriesJSON.txt"; 

// Perform functions after DOM is readyState 
$("document").ready(
    function() { 
     getFromFile(vPathToJSON, vCategoriesJSON, "JSON") 
      .then(fillCategoriesDropdown) 
      .then(getFromFile(vPathToXML, "acMitigation.xml", "XML")); 
    } 
); 

// Use jQuery AJAX "GET" function to import from file and parse as 
requested 
function getFromFile(pFilePath, pFileName, pParseType) { 
    var vCompletePath = pFilePath + pFileName; 

    switch(pParseType) { 
     case "JSON": 
      return $.get(vCompletePath) 
       .then(function(returnedText) { 
        return JSON.parse(returnedText); 
      }); 
     case "XML": 
      $.ajax({ 
       type: "GET", 
       url: vCompletePath, 
       dataType: "xml", 
       success: function(xml) { 
        console.log("Success!"); 
        fillMainTable(xml); 
       }, 
       error: function() { 
        console.log("Unsuccessful!"); 
       } 
      }); 
      break; 
    } 
} 

// Fill Category dropdown dynamically based on returned JSON file values 
function fillCategoriesDropdown(pReturnedJSON) { 
    for (i = 0; i < pReturnedJSON.length; i++) { 
     var vNewOption = document.createElement("OPTION"); 
     vNewOption.text = pReturnedJSON[i].category; 
      document.getElementById("id_CategorySelect").appendChild(vNewOption); 
     aListOfCategories[i] = pReturnedJSON[i]; 
    } 
} 

function fillMainTable(pXML) { 
    var items = pXML.getElementsByTagName("item"); 
    // ??? 
}

任何和所有幫助表示讚賞！

來源

2017-10-12 JohnS

oops，你可以忽略應該被刪除的「aListOfCategories」行 – JohnS

我不確定這是否是最佳策略，但至少可以工作。

僅供參考，我更改了函數的名稱以更準確地描述它的功能。

我面臨的主要問題是它正在拾取導致元素樹導航混亂的空文本節點。

function getColumnNames(pXML) { 
    var entriesElement = pXML.childNodes[0].childNodes[1].nodeName; //finds <item> 
    var items = pXML.getElementsByTagName(entriesElement); //array of <item> elements 

    var columns = []; //column elements and names 
    var j = 0; 

    // childNodes starts at 1 and goes up by 2 to skip empty text nodes in <item> 
    for (i = 1; i < items[0].childNodes.length; i += 2) { 
     var elementName = items[0].childNodes[i].nodeName; 
     var elementValue = items[0].childNodes[i].textContent; 

     columns[j] = { 
       "elementName":elementName, 
       "elementValue":elementValue}; 
     console.log(columns[j]); 
     j++; 
    } 
}

來源

2017-10-12 17:26:00 JohnS

將AJAX的內嵌XML轉換爲HTML

回答

相關問題