使用外部XML文件在JavaScript中解析xml

Question

I am trying to parse an XML document in JavaScript but I am receiving a TypeError: xmlDoc.getElementsByTagName(...)[0] is undefined. I want to make sure I am parsing the XML correctly.

Here is my funciton to load the external XML:

function loadXML(callback) {   

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/xml");
        xobj.open('GET', 'restaurant_menu.xml', true); 
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
}

I am then loading parsing the XML in this JavaScript function:

function showBreakfast() {

  loadXML(function(response) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(response, "text/xml");

        document.getElementById("breakfast").innerHTML = xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue;
    });

}

but I am receiving a TypeError. Am I parsing the XML correctly? Here is my XML document. Shouldn't I be receiving "Fruit Bowl" in my show Breakfast function?

<?xml version="1.0" encoding="UTF-8"?>
<MENU>
  <BREAKFAST>
    <APPETIZER><NAME>Fruit Bowl</NAME><PRICE>10.90</PRICE></APPETIZER>
    <SALAD><NAME>Caeser SALAD</NAME><PRICE>3.90</PRICE></SALAD>
    <SOUP><NAME>Chicken Noodle</NAME><PRICE>5.90</PRICE></SOUP>
    <ANTREE><NAME>Omelet</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Scrambled Eggs</NAME><PRICE>20.90</PRICE></ANTREE>
    <DESSERT><NAME>Apple Pie</NAME><PRICE>7.90</PRICE></DESSERT>
  </BREAKFAST>
  <BRUNCH>
    <APPETIZER><NAME>Fruit Bowl</NAME><PRICE>10.90</PRICE></APPETIZER>
    <APPETIZER><NAME>EggPlant Frits</NAME><PRICE>10.90</PRICE></APPETIZER>
    <SALAD><NAME>House Salad</NAME><PRICE>3.90</PRICE></SALAD>
    <SOUP><NAME>Chicken Noodle</NAME><PRICE>5.90</PRICE></SOUP>
    <ANTREE><NAME>French Toast</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Omelet</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Scrambled Eggs</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Hamburg</NAME><PRICE>20.90</PRICE></ANTREE>
    <DESSERT><NAME>Apple Pie</NAME><PRICE>7.90</PRICE></DESSERT>
  </BRUNCH>
  <LUNCH>
    <APPETIZER><NAME>Calamari</NAME><PRICE>10.90</PRICE></APPETIZER>
    <SALAD>Caeser Salad<PRICE>3.90</PRICE></SALAD>
    <SALAD><NAME>Arugula Salad</NAME><PRICE>3.90</PRICE></SALAD>
    <SOUP><NAME>Chicken Noodle</NAME><PRICE>5.90</PRICE></SOUP>
    <SOUP><NAME>Italian Wedding Soup</NAME><PRICE>5.90</PRICE></SOUP>
    <ANTREE><NAME>Steak</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Hamburg</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Angel Hair Pasta</NAME><PRICE>20.90</PRICE></ANTREE>
    <DESSERT><NAME>Tiramisu</NAME><PRICE>7.90</PRICE></DESSERT>
  </LUNCH>
  <DINNER>
    <APPETIZER><NAME>Calamari</NAME><PRICE>10.90</PRICE></APPETIZER>
    <APPETIZER><NAME>EggPlant Frits</NAME><PRICE>10.90</PRICE></APPETIZER>
    <SALAD>House Salad<PRICE>3.90</PRICE></SALAD>
    <SALAD><NAME>Caeser Salad</NAME><PRICE>3.90</PRICE></SALAD>
    <SOUP>Chicken Noodle<PRICE>5.90</PRICE></SOUP>
    <SOUP><NAME>Italian Wedding Soup</NAME><PRICE>5.90</PRICE></SOUP>
    <SOUP><NAME>Roasted Patato</NAME><PRICE>5.90</PRICE></SOUP>
    <ANTREE><NAME>Steak</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Hamburg</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Angel Hair Pasta</NAME><PRICE>20.90</PRICE></ANTREE>
    <ANTREE><NAME>Roasted Duck</NAME><PRICE>20.90</PRICE></ANTREE>
    <DESSERT><NAME>Apple Pie</NAME><PRICE>7.90</PRICE></DESSERT>
    <DESSERT><NAME>Tiramisu</NAME><PRICE>7.90</PRICE></DESSERT>
    <DESSERT><NAME>Creme Brule</NAME><PRICE>7.90</PRICE></DESSERT>
  </DINNER>
  <DRINKS>
    <BEER><NAME>Bud Weiser</NAME><PRICE>5.90</PRICE></BEER>
    <BEER><NAME>Hefe Weissbier</NAME><PRICE>6.90</PRICE></BEER>
    <WINE><NAME>Cabernet Sauvignon</NAME><FROM>Napa Valley</FROM><PRICE>15.90</PRICE></WINE>
    <WINE><NAME>Margaux</NAME><PRICE>50.90</PRICE></WINE>
    <WINE><NAME>Pinot Noir</NAME><FROM>Napa Valley</FROM><PRICE>12.90</PRICE></WINE>
    <WINE><NAME>Chianti</NAME><PRICE>10.90</PRICE></WINE>
    <COFFEE><NAME>Star Bucks</NAME><PRICE>3.90</PRICE></COFFEE>
    <SODA>Coca Cola<PRICE>3.90</PRICE></SODA>
    <SODA>Sprite<PRICE>3.90</PRICE></SODA>
  </DRINKS>
</MENU>

Answer 1

You said xmlDoc.getElementsByTagName("Name") , but your XML has no <Name> elements. It returns a zero-length node list. You then try to read the childNodes of the first item in that list, but since there isn't one, you get an error.

The XML does have <NAME> elements. XML is case-sensitive.