CODEWITHSUNDEEP
javascriptajaxxmlxmldom
Manisha Singh Sanoo
Manisha Singh Sanoo

Reputation: 929

Load XML data using Ajax and Javascript when XML content is received as XML file

I'm trying to display data from the xml file by first getting the content of the xml file and storing it in XML DOM. Once the DOM object is created it is then parsed. I used a for loop so as to get data from each child node of the parent node but somehow only the second node's data is showing.

This is the code where the error is:

    xmlhttp.open("GET","company.xml", false); //sets the request for calling company.xml
    xmlhttp.send(); //sends the request

    xmlDoc = xmlhttp.responseXML; //sets and returns the content as XML DOM

    //parsing the DOM object

    var employeeCount = xmlDoc.getElementsByTagName("Employee");

    for(i=0; i<employeeCount.length; i++)
    {
        document.getElementById("firstName").innerHTML = xmlDoc.getElementsByTagName("FirstName")[i].childNodes[0].nodeValue;
        document.getElementById("lastName").innerHTML = xmlDoc.getElementsByTagName("LastName")[i].childNodes[0].nodeValue;
        document.getElementById("contactNum").innerHTML = xmlDoc.getElementsByTagName("ContactNo")[i].childNodes[0].nodeValue;
    }

The XML file:

<?xml version="1.0"?>
<Company>
<Employee category="technical">
<FirstName>Tanmay</FirstName>
    <Nickname>Tania</Nickname>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
</Employee>
<Employee category="non-technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
</Employee>
</Company>

This the output:

enter image description here

How can i display the data from node [0] as well? Any suggestions will be appreciated. Thanks.

Upvotes: 0

Views: 827

Answers (1)

har07
har07

Reputation: 89285

The problem is that you're overwriting data from previous Employee on every iteration :

for(i=0; i<employeeCount.length; i++)
{
    document.getElementById("firstName").innerHTML = xmlDoc.getElementsByTagName("FirstName")[i].childNodes[0].nodeValue;
    document.getElementById("lastName").innerHTML = xmlDoc.getElementsByTagName("LastName")[i].childNodes[0].nodeValue;
    document.getElementById("contactNum").innerHTML = xmlDoc.getElementsByTagName("ContactNo")[i].childNodes[0].nodeValue;
}

That's why only the last Employee data remains in innerHTMLs in the end.

Upvotes: 1

Related Questions