Scramble Bell Scramble Bell - 5 months ago 15
Ajax Question

SOLVED 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