Javascript – getElementsByTagName returns undefined for some elements

I’m parsing an XML via Javascript and I try to print out specific elements in HTML. I use the method getElementsByTagName and it seems to be working for some elements, but for others it returns undefined, even though the element name is written correctly. Here is a code snippet from the XML file:

<WeatherData>
        <Cloudiness>
            <PropObj>
                <Prop>
                    <Key>Cloudiness</Key>
                    <Type>Text</Type>
                </Prop>
                <PropItem>
                    <Value>Very cloudy</Value>
                </PropItem>
            </PropObj>
        </Cloudiness>
        <Humidity>
            <PropObj>
                <Prop>
                    <Key>Humidity</Key>
                    <Type>Text</Type>
                </Prop>
                <PropItem>
                    <Value>Very humid</Value>
                <PropItem/>
            </PropObj>
        </Humidity>
        <MinTemp>
            <PropObj>
                <Prop>
                    <Key>MinimumTemperature</Key>
                    <Type>Text</Type>
                </Prop>
                <PropItem>
                    <Value>3</Value>
                <PropItem/>
            </PropObj>
        </MinTemp>
        <MaxTemp>
            <PropObj>
                <Prop>
                    <Key>MaximumTemperature</Key>
                    <Type>Text</Type>
                </Prop>
                <PropItem>
                    <Value>30</Value>
                </PropItem>
            </PropObj>
        </MaxTemp>
</WeatherData>

I created a table in HTML to extract the values from Cloudiness, Humidity, MinTemp and MaxTemp, which are in this case “Very cloudy”, “Very humid”, 3 and 30. The table in HTML looks like this:

<table class="table" title="Weatherinformation">
        <caption>Weather Information</caption>
    <tr> 
        <th>Cloudiness:</th>
        <td id="cloudiness"></td>
    </tr>
     <tr>
        <th>Humidity:</th>
        <td id="humidity"></td>
    </tr>
    <tr>
        <th>Minimum temperature:</th>
        <td id="mintemp"></td>
    </tr>
    <tr>
        <th>Maxmimum temperature:</th>
        <td id="maxtemp"></td>
    </tr> </table>

And in JS, I update the innerHTML of the table cells by doing this:

document.getElementById("cloudiness").innerHTML =  xmlDoc.getElementsByTagName("Cloudiness")[0].getElementsByTagName("Value")[0].textContent;
document.getElementById("humidity").innerHTML = xmlDoc.getElementsByTagName("Humidity")[0].getElementsByTagName("Value")[0].textContent;
document.getElementById("mintemp").innerHTML = xmlDoc.getElementsByTagName("MinTemp")[0].getElementsByTagName("Value")[0].textContent;
document.getElementById("maxtemp").innerHTML = xmlDoc.getElementsByTagName("MaxTemp")[0].getElementsByTagName("Value")[0].textContent;

And for some reason, it works fine for Cloudiness and Humidity (I get the correct values “Very cloudy” and “Very humid”). But for MinTemp and MaxTemp, I always get an undefined error app.js:57 Uncaught TypeError: Cannot read property 'textContent' of undefined. Does anyone know why I get this error? Would appreciate all kinds of help!

Answer

Looks like in the xml document, the tag is not closed properly.

            <Humidity>
               <PropObj>
                    <Prop>
                         <Key>Humidity</Key>
                      <Type>Text</Type>
                     </Prop>
               <PropItem>
                  <Value>Very humid</Value>
               <PropItem/>     

The last tag above is not a closure tag – may be a typo ?

PS: There are others below with the same issue, please fix them as well.