Konvertieren von AJAX-XML in HTML

Question

Ich habe eine Webseite, die es dem Benutzer ermöglicht, eine Kategorie aus einer Dropdown-Liste auszuwählen. Die Kategorie bezieht sich auf eine Tabelle, die von einer XML-Datei abgeleitet ist, in der sich AJAX befindet. Ich beabsichtige, JS-Code zu verwenden, um den Inhalt der XML-Datei zu lesen und eine Tabelle basierend auf den darin enthaltenen Werten zu erstellen. (Mit anderen Worten, die XML-Dateien könnten Tabellen mit völlig unterschiedlichen Spalten erzeugen, weshalb ich nichts hart programmieren möchte, sondern sie lieber programmatisch erstellen würde.) Ich möchte auch keine XSLT oder irgendeine andere verwenden Methoden, die eine zweite Gruppe von Dateien erstellen würden; Die verwendeten XML-Dateien gelten als "Quellen der Wahrheit".

Ich kann eine XML-Datei laden, aber ich habe Schwierigkeiten beim Navigieren der Struktur, um Spaltennamen aus dem ersten Kindelement zu lesen.

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

Ich möchte den ersten Satz von <item> Elemente in der Lage sein und Werte verwenden, um ihre Texte zu lesen, die <th> Elemente in der Tabelle zu erzeugen. Und füllen Sie dann die Tabelle mit dem Rest des XML-Inhalts aus.

Ich habe versucht, Elemente [0] .ChildNodes [0], aber es nimmt die Zeilenumbrüche (die ich nicht aus den XML-Quelldateien entfernen möchte). Ich habe auch versucht, Elemente [0] .Kinder [0], aber ich bekomme "Kann nicht die Eigenschaft '0' von undefinierten oder Null-Referenz".

Hier ist mein Code so weit:

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"); 
    // ??? 
} 

Jedwedes Hilfe ist willkommen!

Answer 1

Ich bin mir nicht sicher, ob dies die beste Strategie ist, aber es funktioniert zumindest.

FYI, ich änderte den Namen der Funktion, um genauer zu beschreiben, was es tut.

Das Hauptproblem, mit dem ich konfrontiert war, war, dass es die leeren Textknoten aufnahm, die das Navigieren im Elementbaum verwirrend machten.

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