My goal is to retrieve XML data from an ajax request and extract information using the DOM. The ajax request itself seems to be working fine as I can access AjaxRequest.responseText without any issues. However, I am encountering an error message stating:
'null' is not an object (evaluating 'resturantsCategoriesAjaxXML.getElementsByTagName')
Additionally, when attempting to log the responseXML, all I see is null as if it hasn't been defined. Below is the complete JS code handling the AJAX request (apologies for the unconventional variable names) along with the simple XML being fetched. Thank you for your assistance :D
Javascript:
restaurantsCategoriesAjaxRequestAddress = "testFiles/categoriesAjax.xml";
restaurantsCategoriesAjaxRequest = new XMLHttpRequest();
restaurantsCategoriesAjaxRequest.onreadystatechange = function(){
if(restaurantsCategoriesAjaxRequest.readyState == 4){
restaurantsCategoriesAjaxXML = restaurantsCategoriesAjaxRequest.responseXML;
console.log(restaurantsCategoriesAjaxRequest.responseXML);
categoriesArray = restaurantsCategoriesAjaxXML.getElementsByTagName("category");
categoriesArrayLength = categoriesArray.length;
alert(categoriesArrayLength);
categoriesArrayIterationControl = 0;
while (categoriesArrayLength >= categoriesArrayIterationControl) {
categoryName = categoriesArray[categoriesArrayIterationControl].getAttribute("name");
//create new <li> object
//add to categories menu on restaurants page
alert(categoryName);
}
}
}
restaurantsCategoriesAjaxRequest.open("GET", restaurantsCategoriesAjaxRequestAddress, true);
restaurantsCategoriesAjaxRequest.overrideMimeType("text/xml");
restaurantsCategoriesAjaxRequest.send();
console.log(restaurantsCategoriesAjaxRequest.readyState);
XML:
<?xml version='1.0'?>
<category name="Fast_Food" id="1120"></category>
<category name="Chinese" id="1108"></category>
<category name="Italian" id="1230"></category>