Parsing di un documento XML con le Fetch API di JavaScript

Le Fetch API normalmente gestiscono le risposte HTTP nel formato JSON. Tuttavia, è possibile accedere ai dati della risposta come semplice testo e questa caratteristica si rivela essere estremamente utile nel caso dei documenti XML.

Il metodo DOMParser:parseFromString()

La classe DOMParser può costruire un oggetto di tipo Document a partire da una stringa HTML, XML, XHTML o SVG.

Il metodo parseFromString() accetta come argomenti la stringa contenente la marcatura da interpretare e il tipo MIME per la scelta del parser da utilizzare.

I tipi MIME ammessi sono:

1. text/xml
2. application/xml
3. application/xhtml+xml
4. image/svg+xml

Ad esempio:

const parser = new DOMParser();

const xmlString = '<message>Hello</message>';
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');

console.log(xmlDoc.documentElement.textContent);
// "Hello"

La raccomandazione di sicurezza in questo caso è quella di utilizzare questo metodo solo con fonti sicure al fine di prevenire attacchi di tipo XSS o di effettuare un filtraggio dei dati preventivo con la classe TrustedHTML.

La classe DOMParser e le Fetch API

Oltre al metodo json(), una risposta HTTP nelle Fetch API contiene anche il metodo text() con cui possiamo leggere il contenuto come semplice testo.

Ecco come possiamo usare la classe DOMParser con le Fetch API.

async function getXMLFile(url = 'feed.xml') {
        try {
            const response = await fetch(url);
            if(!response.ok) {
                throw new Error(response.statusText);
            }
            const text = await response.text();
            const parser = new DOMParser();
            const xml = parser.parseFromString(text, 'text/xml');
            return xml;
        } catch(err) {
            return null;
        }
    }

xml conterrà un valido oggetto di tipo Document con cui possiamo utilizzare i metodi e le proprietà del DOM disponibili in JavaScript.

Ad esempio:

async function parseXMLFeed(url = 'feed.xml') {
        const xmlDocument = await getXMLFile(url);
        if(!xmlDocument) return;
        const items = xmlDocument.getElementsByTagName('item');
        const feed = document.querySelector('.feed');
        const list = document.createElement('ul');

        let html = [];

        for(let i = 0; i < items.length; i++) {
            let item = items[i];
            let title = item.querySelector('title').firstChild.nodeValue;
            let link = item.querySelector('link').firstChild.nodeValue;
            let description = item.querySelector('description').firstChild.nodeValue;

            html.push(`<li><a href="${link}">${title}</a><p>${description}</p></li>`);
        }

        list.innerHTML = html.join('');
        feed.appendChild(list);
    }

xmlDocument contiene la rappresentazione completa dell'albero del DOM del documento XML reperito con le Fetch API.

Partendo da questo oggetto, possiamo accedere a tutti gli elementi del documento XML come siamo normalmente abituati a fare con l'oggetto document per i documenti HTML.

Demo

JavaScript Fetch API Parse XML

Conclusione

In alcuni casi il formato delle risposte di alcune API potrebbe ancora essere di tipo XML. Si tratta di un'eventualità poco comune ma ancora presente in sistemi non aggiornati. Oggi JavaScript ci consente di gestire anche questo scenario con relativa semplicità.