How should i build a javascript page out of a xml file?

Question

I currently am helping my father out with his construction website. He asked me if there was anyway I could automate estimates for his customers "bids" and I built him a desktop prototype application over night. The desktop application is a Swing application that uses java's XMLEncoder/Decoder to load and save files and lets him edit what items customers can select (along with pictures, hourly rates etc.). He liked the prototype so much that he asked me to add this to his website.

I am not a very experienced web-dev (I've never done it in industry) but agreed and am about to start implementation. The goal of this project is to allow him to use the easy to use desktop Swing application to generate XML for how the "Bidding Menu" should look, and then for the website to use Javascript to read the XML to generate all of the items. My question as a noob on web-dev is, what is the proper way to read XML to generate a web-page? I was looking for something akin to an XML decoder in JS but only found the XMLDOM. Any general tips/tutorials/heursistics would be very appreciated.

Below is a demo XML file from the prototype, every set will be a different with each item being a prototype that you can enter the quantity of and the total for the set and all sets will be reflected on the web page.

<?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>

metarmask · Answer 1 · 2016-05-19T15:31:20.987

To parse the XML so you can more easily read it with JavaScript, use the DOMParser object:

/* 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;
}

The way you navigate the parsed JSON is almost the same as in HTML which means you can look at the documentation for Element and Node to find out how to get the value of an attribute, go through the direct children of an element and query its children with CSS selectors to name a few.

How should i build a javascript page out of a xml file?

1 Answers1