AJAXのXMLをHTMLに変換する

Question

私はユーザーがドロップダウンリストからカテゴリを選択できるようにするWebページを持っています。カテゴリは、AJAXのXMLファイルから派生したテーブルに関連しています。私は、XMLコードの内容を読み込み、そこにある値に基づいてテーブルを作成するために、いくつかのJSコードを使用するつもりです。 （言い換えれば、XMLファイルは完全に異なる列を持つテーブルを作成する可能性があるため、何もハードコードしたくないのですが、プログラマチックにビルドすることになります）。また、XSLTや他の第2のファイルセットを作成する方法。使用される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]を試しましたが、 "未定義またはnull参照のプロパティ '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

これが最善の戦略であるかどうかはわかりませんが、少なくともそれは機能しています。

FYI、関数の名前をより正確に記述するように変更しました。

私が直面していた主な問題は、空のテキストノードをピックアップしていて、要素ツリーを操作して混乱させることでした。

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