As we want you to learn by yourself how to code this, I'll (hopefully) give you all the relevant parts you need to get you started.
Steps:
- Modify your XML so that you can find the
day prefix more easily; otherwise you will have to use switch case in your JavaScript code to translate the day name into the prefix.
- Load the XML data on your page containing the class table. To make life easier, I would recommend to not use
XMLHttpRequest but use a library like JQuery, loading your data is then as easy as:
$.ajax('PATHTOXML.xml', {
success: function(data) {
// your XML code will be available inside the "data" variable
}
});
Loop over your loaded data in a loop. The following functions may be handy when you access your XML object:
data.children[0].getAttributeNode("code").value will return "Philo".data.children[0].hasAttribute("code") will return TRUE for the same entry.data.children.length can be used to check for the number of elements (or the length of a contained value in case of strings or numbers), it will return 1 for the base element.data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek") will access the first element (JS uses 0 as base for counting) with the XML tag name "course" and will then return the values for the tag name "dayofWeek"
More examples can be found in this SO Q&A and in this blog post
add the data to your table. I will use a static code example (without any error handling, should be different in your code) to show how this could be done:
var courseName= data.children[0].getAttributeNode("code").value;
var dayName= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].childNodes[0].textContent;
var start= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[0].textContent;
var end= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("hoursofClass")[0].getElementsByTagName("hour")[1].textContent;
var room= data.getElementsByTagName("course")[0].getElementsByTagName("dayofWeek")[0].getElementsByTagName("roomNumber")[0].textContent;
document.getElementById(dayName+start).innerHTML += courseName + ' in ' + room + '<br />' + start + ' - ' + end + '<br />';
If you want to loop over a structure, you can use code similar to the following:
// accesses the first element matching the tag "course"
var courseData= data.getElementsByTagName("course")[0];
// retrieves the node attribute value of attribute "code"
var courseName= courseData.getAttributeNode("code").value;
var courseDaysData= courseData.getElementsByTagName("dayofWeek");
// loop over all course days below one course
for (var icd=0; icd<courseDaysData.length; icd++) {
// loop over your days
}
General hints:
- When running your page in your browser of your choice, open the "Developer Tools" (shortcut should be F12) that will show errors in your code, allow you to position breakpoints to stop your code exactly on the relevant points and much more. It's the most handy tool for JS code debugging that you'll find.
- To see the values of variables, you can add debug output statements in your code. To do so, use
console.log(VARIABLE);, i.e. console.log(dayName);. You will find the output in said Developer Tools.
Regarding your XML:
As mentioned before, the day name (or prefix) in your HTML and XML should match, otherwise you need a "switch case". Besides that, your current XML code just allows you to have different times for one class in one room, I don't know if that is what you wanted to have.
Let me know if you need any more explanation. Good learning!
