How to Loop through XML in JavaScript ?

In JavaScript, looping over XML data is important for processing and extracting information from structured XML documents.

Below is a list of methods utilized to loop through XML.

Using for loop with DOMParser and getElementsByTagName

In this approach, we are using a DOMParser from the xmldom module to parse the XML data into a document object. Then, we use getElementsByTagName to select all elements with the tag name ‘language‘ and iterate through them using a for loop, accessing child elements within each ‘language‘ element to retrieve and display their content.

Run the below command to install xmldom before running the code:

npm install xmldom

Example: The below example uses for loop with DOMParser and getElementsByTagName To Loop Through XML in JavaScript.

JavaScript

let DOMParser = require('xmldom').DOMParser;
const xmlData = `
<languages>
    <language>
        <name>JavaScript</name>
        <type>Programming</type>
    </language>
    <language>
        <name>Python</name>
        <type>Programming</type>
    </language>
    <language>
        <name>Java</name>
        <type>Programming</type>
    </language>
</languages>
`;
const parser = new DOMParser();
const xmlDoc = parser.
    parseFromString(xmlData, 'text/xml');
const lNodes = xmlDoc.
    getElementsByTagName('language');
for (let i = 0; i < lNodes.length; i++) {
    const name = lNodes[i].
        getElementsByTagName('name')[0].textContent;
    const type = lNodes[i].
        getElementsByTagName('type')[0].textContent;
    console.log(`Name: ${name}, Type: ${type}`);
}

Output:

Name: JavaScript, Type: Programming
Name: Python, Type: Programming
Name: Java, Type: Programming

Using Array.from with DOMParser and childNodes

In this approach, we are using Array.from to convert the NodeList into an array, allowing us to use forEach for iteration. Within the forEach loop, we check if each node is an element node with the name ‘language‘ before extracting and displaying the content of its child elements (‘name‘ and ‘type‘).

Run the below command to install xmldom before running the code:

npm install xmldom

Example: The below example uses Array.from with DOMParser and childNodes To Loop Through XML in JavaScript.

JavaScript

const {
    DOMParser
} = require('xmldom');
const xmlData = `
<languages>
    <language>
        <name>JavaScript</name>
        <type>Programming</type>
    </language>
    <language>
        <name>Python</name>
        <type>Programming</type>
    </language>
    <language>
        <name>Java</name>
        <type>Programming</type>
    </language>
</languages>
`;
const parser = new DOMParser();
const xmlDoc = parser.
    parseFromString(xmlData, 'text/xml');
const lNodes = xmlDoc.
    documentElement.childNodes;
Array.from(lNodes).forEach(node => {
    if (node.nodeType === node.ELEMENT_NODE && 
            node.nodeName === 'language') {
        const name = node.
            getElementsByTagName('name')[0].textContent;
        const type = node.
            getElementsByTagName('type')[0].textContent;
        console.log(`Name: ${name}, Type: ${type}`);
    }
});

Output:

Name: JavaScript, Type: Programming
Name: Python, Type: Programming
Name: Java, Type: Programming