Javascript - Unable to get data from a nested XML file - Cannot read property of null

Question

I exported a flash web gallery from Lightroom. It uses an XML file to display the caption of each photo. All I want is to extract the description tag from this XML file so that I can send it to a proofreader. I've been trying to use javascript to do this but it just isn't working. The code I have is able to get me a partial list of all the descriptions. My code iterates through the description tags but once it meets an empty tag: it (using Chrome debugger) throws a Uncaught TypeError: Cannot read property 'data' of null and stops execution. I've tried to check against "null !==" but the I am guessing the code still runs because I still get the error.

So far, I am convinced that XML is evil.

Sample of XML file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<mediaGroup>
  <amgVersion version="1.3" />
  <groupInfo>
    <bunch of="data I don't care about" />
  </groupInfo>
  <sizes>
    <bunch of="data I don't care about" />
  </sizes>

  <media totalGallerySize="104">
    <item>
      <title></title>
      <description>Yo! Look at that monkey on the bars</description>
      <imageID />
      <mediaType/>
      <renditions>
        <rendition size="large" />
        <rendition size="medium" />
        <rendition size="small" />
        <rendition size="thumb"  />
      </renditions>
    </item>
    <item>
      <title></title>
      <description>It's trying to parse XML files ahhaha</description>
      <imageID />
      <mediaType/>
      <renditions>
        <rendition size="large" />
        <rendition size="medium" />
        <rendition size="small" />
        <rendition size="thumb"  />
      </renditions>
    </item>
    <item>
      <title></title>
      <description></description>
      <imageID />
      <mediaType/>
      <renditions>
        <rendition size="large" />
        <rendition size="medium" />
        <rendition size="small" />
        <rendition size="thumb"  />
      </renditions>
    </item>
    <item>
      <title></title>
      <description>That missing description is going to make him angry</description>
      <imageID />
      <mediaType/>
      <renditions>
        <rendition size="large" />
        <rendition size="medium" />
        <rendition size="small" />
        <rendition size="thumb"  />
      </renditions>
    </item>  
  </mediaGroup>

For my code I have the following:

<script type="text/javascript">
  function loadXMLDoc(dname) {
if (window.XMLHttpRequest)
    {
    xhttp=new XMLHttpRequest();
    }
else
    {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
  } //end function

  xmlDoc=loadXMLDoc("group.xml");
  var z=xmlDoc.getElementsByTagName("item"), nameELEM;
  document.write(z.length);
  for (i=0;i<=z.length;i++){
    nameELEM=z[i].getElementsByTagName("description")[0];
    if (typeof nameELEM.firstChild.data !== "undefined") { //This is the line the error quotes
      //handle property xxx of documentFragment as required
      document.write(nameELEM.firstChild.data + "<br />");
    }
  }
 </script>

Line 38: Uncaught TypeError: Cannot read property 'data' of null Line 38 = if (typeof nameELEM.firstChild.data !== "undefined") {

Answer 1

Instead of:

if (nameELEM.firstChild.data !== null)

Try:

if (typeof nameELEM.firstChild.data !== "undefined")