Sarath Raja Sarath Raja - 1 month ago 6
Javascript Question

Unable to completely populate HTML table from XML data

I am building an ReST web service application that takes request from HTML page and I am using AJAX's XMLHTTPRequest object to get the XML data and to interpret it into an HTML table. Since I am using ReST I get the output from the database in the form of JSON or XML. As AJAX has an inbuilt mechanism to interact with XML I opted for XML rather than JSON.

Now, my issue here is I am unable to populate HTML table completely. Since, I am very new to AJAX I am unable to figure out how it works and how to decode the root cause of the error.

Here is my webpage code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
th, td
{
padding: 5px;
}
</style>
</head>
<body>
<h1>Enter Book Details</h1><br>

<form method="post" action="http://localhost:8080/mysql/glarimy/lib/addbook" onsubmit="myButton.disabled = true; return true;">
Title :<br> <input type = "text" name = "title" ><br>
Author :<br><input type = "text" name = "author" ><br>
Price : <br><input type = "text" name = "price" ><br>
No. of Pages :<br><input type="text" name = "pages" ><br>
<input type = "submit" id="submit" value = "Add Book">
<input type = "reset" value ="Reset"><br><br>
</form>

<button onclick = "location.href = 'http://localhost:8080/mysql/glarimy/lib/getall'" type = "button">Get all book data in XML</button>
<button type="button" onclick="loadXMLDoc()">Get all books data </button>
<table id="demo"></table>
<script>
function loadXMLDoc()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
myFunction(this);
}
};
xmlhttp.open("GET", "http://localhost:8080/mysql/glarimy/lib/getall", true);
xmlhttp.send();
}
function myFunction(xml)
{
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>ISBN</th><th>Title</th><th>Author</th><th>Price</th><th>No. of Pages</th></tr>";
var x = xmlDoc.getElementsByTagName("book");
for (i = 0; i < x.length; i++)
{
table += "<tr><td>" +
x[i].getElementsByTagName("isbn")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>";
x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
"</td></td>";
x[i].getElementsByTagName("pages")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
"</td><tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>


I get the output form datas

<books>
<book>
<author>mark</author>
<isbn>1</isbn>
<pages>500</pages>
<price>2000.0</price>
<title>java</title>
</book>
<book>
<author>john</author>
<isbn>2</isbn>
<pages>100</pages>
<price>1000.0</price>
<title>advancedjava</title>
</book>
<book>
<author>paul</author>
<isbn>3</isbn>
<pages>500</pages>
<price>500.0</price>
<title>tomcat</title>
</book>
<book>
<author>jack</author>
<isbn>4</isbn>
<pages>1000</pages>
<price>5000.0</price>
<title>rest</title>
</book>
</books>


The output I am getting is
Click Here

Can anyone explain me how that AJAX code is actually working? I am unable to trace out that XML decoding part.

Updated Output : Click this

Answer

It looks like the problem is with the building of your table. You are closing a <tr> tag when you don't need to and have too many semicolons. This is the fix:

for (i = 0; i < x.length; i++) 
{ 
    table += "<tr><td>" +
    x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("isbn")[0].childNodes[0].nodeValue +
    "</td><td>"+
    x[i].getElementsByTagName("pages")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
    "</td><td>"+
    x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td></tr>";
}

You can see in this image the problems with your code: enter image description here