当XML内容作为XML文件接收时，使用Ajax和Javascript加载XML数据

Question

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:

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

Answer 1

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 innerHTML s in the end.