Scramble Bell Scramble Bell - 1 month ago 4
Javascript Question

Trouble running AJAX

I'm doing homework and must use javascript object and array in my ajax. I'm sure there is something wrong in the code, but as I have very limited knowledge I just can't find it. I'm just currently learning this and a few bits and pieces were followed through examples I could find online.

XML

<?xml version="1.0" encoding="UTF-8" ?>
<onlineOrder month="03/2015">
<product>
<code>CRA01</code>
<unitPrice>10.50</unitPrice>
<lastMonth>101</lastMonth>
<thisMonth>120</thisMonth>
</product>
<product>
<code>CRA02</code>
<unitPrice>21.30</unitPrice>
<lastMonth>50</lastMonth>
<thisMonth>43</thisMonth>
</product>
<product>
<code>HOB11</code>
<unitPrice>8.50</unitPrice>
<lastMonth>201</lastMonth>
<thisMonth>312</thisMonth>
</product>
<product>
<code>HOB13</code>
<unitPrice>43.50</unitPrice>
<lastMonth>20</lastMonth>
<thisMonth>21</thisMonth>
</product>
<product>
<code>JEW21</code>
<unitPrice>200.00</unitPrice>
<lastMonth>7</lastMonth>
<thisMonth>11</thisMonth>
</product>
<product>
<code>JEW22</code>
<unitPrice>450.00</unitPrice>
<lastMonth>10</lastMonth>
<thisMonth>4</thisMonth>
</product>
<product>
<code>GAM41</code>
<unitPrice>20.30</unitPrice>
<lastMonth>420</lastMonth>
<thisMonth>450</thisMonth>
</product>
<product>
<code>GAM42</code>
<unitPrice>45.50</unitPrice>
<lastMonth>361</lastMonth>
<thisMonth>180</thisMonth>
</product>
</onlineOrder>


HTML - The part with the table is something I can work out pretty easily myself. The problem is that I am only displaying the button, and when pressed it is not displaying anything. I do not use jQuery and never have, so sorry if this is a pain to deal with.




<script>
function getOnlineOrderAjax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
processResult(xhttp);
}
};

xhttp.open("GET", "A8.xml", true);
xhttp.send();
}


function processResult(xhttp) {
var xml = xhttp.responseXML;
var onlineOrderObj = parseXML(xml);

console.log(onlineOrderObj);
display(onlineOrderObj);
}


function parseXML(xml) {
var onlineOrderObj = {}; //hold information
var onlineOrderElement = xml.getElementsByTagName("onlineOrder")[0];
onlineOrderObj.month = onlineOrderElement.getAttribute("month");
onlineOrderObj.productList = []; //create array

var productElements = onlineOrderElement.getElementsByTagName("product");
for(var i = 0; i < productElements.length; i++) {
var product = {}; //create index object

product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
product.unitPrice = Number(indexElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue);
product.lastMonth = Number(indexElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue);
product.thisMonth = Number(indexElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue);

onlineOrderObj.productList.push(product); //object into array
}
return onlineOrderObj;
}


function display(onlineOrderObj){
var change = 0;

var html = "<h1>Online order statistics for " + onlineOrderObj.month + "</h1>";
html += "<table border='1'>";
html += "<tr><th>Code</th><th>Unit Price</th><th>Last Month </th><th>This Month</th></tr>";
for(var i=0; i < onlineOrderObj.productList.length; i++) {
html += "<tr>";
html += "<td align='center'><b>" + onlineOrderObj.productList[i].code + "</b></td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].unitPrice + "</td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].lastMonth + "</td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].thisMonth + "</td>";
html += "</tr>";
}
html += "</table>";

var onlineOrderDiv = document.getElementById("onlineOrderDiv");
onlineOrderDiv.innerHTML = html;
}
</script>
</head>
<body>
<button onClick="getOnlineOrderAjax()">
Click here to view online order statistics
</button>
<br /><br />
<div id="onlineOrderDiv" />

</body>
</html>

Answer

I think for the most part you were doing things right, although I don't understand why you are using AJAX for this.

You are making the error in the parseXML function. It should be productElements not indexElements:

function parseXML(xml) {
  var onlineOrderObj = {}; //hold information
  var onlineOrderElement = xml.getElementsByTagName("onlineOrder")[0];
  onlineOrderObj.month = onlineOrderElement.getAttribute("month");
  onlineOrderObj.productList = []; //create array

  var productElements = onlineOrderElement.getElementsByTagName("product");
  console.log(productElements);
  for (var i = 0; i < productElements.length; i++) {
    var product = {}; //create index object

    product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;

    product.unitPrice = Number(productElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue); // these were named wrong
    product.lastMonth = Number(productElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue);
    product.thisMonth = Number(productElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue);

    onlineOrderObj.productList.push(product); //object into array
  }
  return onlineOrderObj;
}

Also you should always use a closing tag for a div.

You can checkout this plunker

Comments