Monday, May 18, 2009

Parse XML file in JavaScript part 2

As one of reader asked about how to handle XML respone if we get more than records or if your XML file have many child nodes.
I gave here one complete example with XML file and JavaScript in JSP.

1. abc.xml

<Students>
<Student>
<Name>Binod Kumar Suman</Name>
<Hostel>Ganga</Hostel>
<Contact>999999999</Contact>
</Student>

<Student> <Name>Pramod Kumar Modi</Name>
<Hostel>Godawari</Hostel>
<Contact>88888888</Contact>
</Student>

<Student>
<Name>Sanjay Kumar</Name>
<Hostel>Satjal</Hostel>
<Contact>7777777</Contact>
</Student>

<Student>
<Name>Mukesh Ambani</Name>
<Hostel>Rewti</Hostel>
<Contact>6666666</Contact>
</Student>

</Students>

2. StudentInfo.jsp

<html><head><title>Binod Java Solution AJAX </title>
<script type="text/javascript">

function showResult(){

var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false"; xmlDoc.load("abc.xml");
var students=xmlDoc.documentElement;
var student = students.childNodes(0);
var rows = students.childNodes.length; v
ar cols = student.childNodes.length;

var body = document.getElementsByTagName("body")[0];
//var tabl = document.createElement("table");
var tabl = document.getElementById("studentinfo");
var tblBody = document.createElement("tbody");

for (var i = 0; i < rows; i++) {
var row = document.createElement("tr");
student = students.childNodes(i);

for (var j = 0; j < cols; j++) {
var cell = document.createElement("td");
var cellText = document.createTextNode(student.childNodes(j).firstChild.text); cell.appendChild(cellText);
row.appendChild(cell);
}

tblBody.appendChild(row);
tabl.appendChild(tblBody);
tabl.setAttribute("border", "2");
}

</script>

</head><body onload="showResult()">
<h2> GET STUDENT INFO </h2><br>

<table id="studentinfo"> <tr bgcolor='red'> <td >Name</td><td>Hostel</td><td>Contact</td> </tr> </table>
</body>
</html>

Now your html table will grow dynamically as per number of records in XML file.

15 comments:

  1. why its not working on mozilla?

    ReplyDelete
  2. there is parse error in your file.
    Line 10 (there is a "v" at the end which is supposed to be "var" in the following line) and
    i had to put a "}" just before the "/script" tag to get the thing working. Thank you anyway.

    ReplyDelete
  3. I fixed everything according to previuos post, but it still doesn't work in Firefox

    ReplyDelete
  4. if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    probably because of this try it
    -Giri

    ReplyDelete
  5. yes, it still doesnt work in firefox

    ReplyDelete
  6. That's because this line:

    var xmlDoc=new ActiveXObject("MSXML.DOMDocument");

    is specific for IE. For non-IE browsers you probably want to use the DOM Parser:

    http://www.w3schools.com/dom/dom_parser.asp

    ReplyDelete
  7. Thanks, your article helped me a lot - I now more or less understand how to carry on with XML and Javascript. Good job!

    ReplyDelete
  8. code is not working on mozilla

    ReplyDelete
  9. function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
    // Internet Explorer
    try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }

    return xmlHttp;
    }

    ReplyDelete
  10. its not working in neither of browsers....wat might be the problem??plzz reply me to my emailid johnterry102010@hotmail.com

    ReplyDelete
  11. this code isn't working in any of my browsers i donno wat is the problem ...please get me out of this problem ....plzz

    ReplyDelete
  12. thanks you man .... you saved my life :) just the thing I was looking for ..

    ReplyDelete
  13. Very nice.Please keep visit this blog for good tutorial on Java.

    ReplyDelete

You can put your comments here (Either feedback or your Question related to blog)