Question

我有一个网页，允许用户从下拉列表中选择一个类别。该类别涉及一个源自AJAX所在的XML文件的表。我打算使用一些JS代码来读取XML文件的内容，并根据其中的值创建一个表。（换句话说，XML文件可以创建具有完全不同列的表，这就是为什么我不想硬编码任何东西，而是宁愿以编程方式构建它。）我也不想使用XSLT或任何其他可以创建第二组文件的方法;使用的XML文件被认为是“真相来源”。

我可以加载一个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");
    // ???
}

感谢任何和所有帮助！

Answer 1

我不确定这是否是最佳策略，但它至少有效。

仅供参考，我更改了该功能的名称，以更准确地描述它的作用。

我遇到的主要问题是它正在拾取空文本节点，这使得导航元素树变得混乱。

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

将AJAX'd-in XML转换为HTML

1 个答案: