xmlファイルからjavascriptページを作成するにはどうすればよいですか？

Question

私は現在、建設用ウェブサイトで父親を助けています。彼は私に尋ねました。とにかく、顧客の「入札」の見積もりを自動化して、夜間にデスクトッププロトタイプアプリケーションを作成しました。デスクトップアプリケーションは、JavaのXMLEncoder/Decoderを使用してファイルを読み込んで保存するSwingアプリケーションであり、顧客が選択できる項目（ピクチャ、時間別レートなど）を編集できるようにします。彼はプロトタイプが好きで、自分のウェブサイトにこれを追加するように頼んだ。

私は経験豊富なWeb-devではありませんが（私は業界でこれをやったことはありませんでしたが）合意し、実装を開始しようとしています。このプロジェクトの目的は、使いやすいデスクトップSwingアプリケーションを使用して、「入札メニュー」の外観をXMLで生成し、次にJavaScriptを使用してすべてのアイテムを生成するJavaScriptを使用できるようにすることです。 web-devのnoobとしての私の質問は、Webページを生成するためにXMLを読む適切な方法は何ですか？私はJSのXMLデコーダに似たものを探していましたが、XMLDOMしか見つかりませんでした。任意の一般的なヒント/チュートリアル/ heursistics非常に感謝されるでしょう。

以下は、プロトタイプのデモXMLファイルです。すべてのセットは、各アイテムとプロトタイプが異なり、セットの数量と合計を入力でき、すべてのセットがWebページに反映されます。

<?xml version="1.0" encoding="UTF-8"?> 
<java version="1.8.0_60" class="java.beans.XMLDecoder"> 
<object class="bidTool.models.BidToolModel" id="BidToolModel0"> 
    <void property="bidItems"> 
    <void method="add"> 
    <object class="bidTool.models.ItemSet" id="ItemSet0"> 
    <void property="description"> 
     <string>Testing Testing 123</string> 
    </void> 
    <void property="mySubsets"> 
     <void method="add"> 
     <object class="bidTool.models.ItemSet" id="ItemSet1"> 
     <void property="description"> 
    <string>Testing Testing 123</string> 
    </void> 
    <void property="myItems"> 
    <void method="add"> 
     <object class="bidTool.models.BidItem"> 
     <void property="cost"> 
     <double>10.0</double> 
      </void> 
      <void property="itemName"> 
      <string>Marble Tile</string> 
      </void> 
      </object> 
     </void> 
     <void method="add"> 
      <object class="bidTool.models.BidItem"> 
      <void property="cost"> 
      <double>10.0</double> 
      </void> 
      <void property="itemName"> 
      <string>Ceramic Tile</string> 
      </void> 
      </object> 
     </void> 
     </void> 
     <void property="setName"> 
     <string>Tieling</string> 
     </void> 
     </object> 
     </void> 
    </void> 
    <void property="setName"> 
     <string>Bathroom</string> 
    </void> 
    </object> 
    </void> 
    </void> 
    <void property="globalItems"> 
    <void method="add"> 
    <object class="bidTool.models.BidItem"> 
    <void property="cost"> 
     <double>34.243</double> 
    </void> 
    <void property="itemName"> 
     <string>Toilet</string> 
    </void> 
    </object> 
    </void> 
    </void> 
</object> 
</java> 

Answer 1

あなたがより簡単にDOMParserオブジェクトを使用、JavaScriptでそれを読むことができるようにXMLを解析するために：あなたは、解析されたJSONをナビゲートする方法はほぼ同じである

/* Same XML as in question */ 
 
var xmlString = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<java version=\"1.8.0_60\" class=\"java.beans.XMLDecoder\">\n <object class=\"bidTool.models.BidToolModel\" id=\"BidToolModel0\">\n <void property=\"bidItems\">\n <void method=\"add\">\n <object class=\"bidTool.models.ItemSet\" id=\"ItemSet0\">\n  <void property=\"description\">\n  <string>Testing Testing 123</string>\n  </void>\n  <void property=\"mySubsets\">\n  <void method=\"add\">\n  <object class=\"bidTool.models.ItemSet\" id=\"ItemSet1\">\n  <void property=\"description\">\n  <string>Testing Testing 123</string>\n </void>\n <void property=\"myItems\">\n  <void method=\"add\">\n  <object class=\"bidTool.models.BidItem\">\n  <void property=\"cost\">\n  <double>10.0</double>\n   </void>\n   <void property=\"itemName\">\n   <string>Marble Tile</string>\n   </void>\n   </object>\n   </void>\n   <void method=\"add\">\n   <object class=\"bidTool.models.BidItem\">\n   <void property=\"cost\">\n   <double>10.0</double>\n   </void>\n   <void property=\"itemName\">\n   <string>Ceramic Tile</string>\n   </void>\n   </object>\n   </void>\n  </void>\n  <void property=\"setName\">\n   <string>Tieling</string>\n  </void>\n  </object>\n  </void>\n  </void>\n  <void property=\"setName\">\n  <string>Bathroom</string>\n  </void>\n </object>\n </void>\n </void>\n <void property=\"globalItems\">\n <void method=\"add\">\n <object class=\"bidTool.models.BidItem\">\n  <void property=\"cost\">\n  <double>34.243</double>\n  </void>\n  <void property=\"itemName\">\n  <string>Toilet</string>\n </void>\n </object>\n </void>\n </void>\n </object>\n</java>"; 
 

 
var parser = new DOMParser(); 
 
var xml = parser.parseFromString(xmlString, "text/xml"); 
 

 
/* Do something with the parsed XML: */ 
 

 
var myItems = xml.querySelectorAll("void[property=myItems] object[class='bidTool.models.BidItem']"); 
 

 
for(var i = 0;i < myItems.length;i++){ 
 
    var table = document.createElement("table"); 
 
    for(var j = 0;j < myItems[i].children.length;j++){ 
 
    var row = document.createElement("tr"); 
 
    var tableHeadingProperty = document.createElement("th"); 
 
    var tableDataValue = document.createElement("td"); 
 
    tableDataValue.textContent = myItems[i].children[j].firstElementChild.textContent; 
 
    tableHeadingProperty.textContent = myItems[i].children[j].getAttribute("property"); 
 
    row.appendChild(tableHeadingProperty); 
 
    row.appendChild(tableDataValue); 
 
    table.appendChild(row); 
 
    } 
 
    document.body.appendChild(table); 
 
}

table { 
 
    border: 1px solid black; 
 
    margin-bottom: 10px; 
 
}

をHTMLのように、ElementとNodeのドキュメントを見て、属性の値を取得する方法を知るには、要素の直接の子要素とクエリi CSSセレクタを持つ子供たちにはいくつか挙げられます。