XML Lab

In this XML document, we have information about children enrolled in a summer camp.

We can parse and manipulate this XML data using Javascript. Lets break down the steps

1. Event Listener for DOMContentLoaded
This event listener is triggered when the HTML document has been completed loaded and parsed.

		document.addEventListener('DOMContentLoaded', function () {
                    // Code to execute when the DOM is fully loaded
                });

2. Fetching and Parsing XML Data

Use the 'fetch' API to retrive XML data from specificed URL. For example ('data/summer_camp_data.xml'). The fetched data is then converted into text and the subsequent actions are performed in the second 'then' block.

		fetch('data/summer_camp_data.xml')
                    .then(response => response.text())
                    .then(data => {
                        // Code to execute after successfully fetching the XML data
                    });

3. Parsing XML Data

The fetched XML data is parsed using the DOMParser to create an XML document (xmlDoc). This document can be queried and manipulated using the DOM (Document Object Model) API.

		const parser = new DOMParser();
                            const xmlDoc = parser.parseFromString(data, 'text/xml');

4. Extracting Child Information

The extractChildInfo function is called to extract information for Child 1 and Child 2 based on their respective IDs.

		
                    const child1Info = extractChildInfo(xmlDoc, '123456789');
                    const child2Info = extractChildInfo(xmlDoc, '13579753');

4. extractChildInfo Function

This function takes the XML document and a child ID as parameters, then uses DOM queries to extract specific information (name, age, gender, allergies, and selected camp) for the child with the given ID.

		
                function extractChildInfo(xmlDoc, childId) {
                    const childElement = xmlDoc.querySelector(`Child[ID="${childId}"]`);
                            
                    return {
                        name: childElement.querySelector('Name FirstName').textContent + ' ' + childElement.
						querySelector ('Name LastName').textContent,
                        age: childElement.querySelector('Age').textContent,
                        gender: childElement.querySelector('Gender').textContent,
                        allergies: childElement.querySelector('DietaryRestrictions Allergy').textContent,
                        selectedCamp: childElement.querySelector('CampProgram SelectedCamp').textContent
                    };
                }

6. Displaying Child information

The displayChildInfo function creates HTML elements to display the extracted information for a child. It appends a new div element to a container (childInfoContainer) with the child's name, age, gender, allergies, selected camp, and a horizontal line for separation.

		
                        function displayChildInfo(childName, childInfo) {
                            const childInfoContainer = document.getElementById('childInfo');
                            const childDiv = document.createElement('div');
                            childDiv.innerHTML = `
                                <h2>${childName}</h2>
                                <p><strong>Name:</strong> ${childInfo.name}</p>
                                <p><strong>Age:</strong> ${childInfo.age}</p>
                                <p><strong>Gender:</strong> ${childInfo.gender}</p>
                                <p><strong>Allergies:</strong> ${childInfo.allergies}</p>
                                <p><strong>Selected Camp:</strong> ${childInfo.selectedCamp}</p>
                                <hr>
                            `;
                            childInfoContainer.appendChild(childDiv);
                        }

Putting all this together, we can display this XML document within this page like so:

XML: Parsing and Manipulation Techniques