TypeScript, leggere tutti i nodi di un file XML

Nel caso che si ha la necessità di leggere tutti i nodi ed i relativi valori di un file XML, nel linguaggio TypeScript, tramite la seguente tecnica possiamo estrapolare i nodi e valori di un file XML.

Di seguito si riporta un file XML di esempio, che sarà utilizzato in questo frammento di codice.

XML.

<dati>

<nodoA>Valore 1</nodoA>

  <nodoB>Valore 2</nodoB>

  <nodoC>

    <sottoNodo>Valore 3</sottoNodo>

  </nodoC>

</dati>

Inseriamo nel progetto, il riferimento alla libreria "HttpClient", in altro sopra ad ogni dichiarazione, dove si trovano gli import, inseriamo la seguente riga di codice.

TypeScript:

import {HttpClient } from '@angular/common/http';

 

Nel costruttore della pagina Angular, si crea una variabile che fa riferimento alla classe httpClient. Si riporta il frammento di codice delle suddette operazioni.

TypeScript:

 

 constructor(

    private http: HttpClient

) { }

 

Nel component della pagina Angular, scriviamo una funzione che legge i vari nodi del file XML, utilizzando le classi "Document"  e "DOMParser".

Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript:

 

  leggiFileXML(): void {

    const url = 'assets/dati2.xml'; // Percorso del file XML (nella cartella assets)

 

    this.http.get(url, { responseType: 'text' }).subscribe({

      next: (data) => {

        const parser = new DOMParser();

        const xmlDoc = parser.parseFromString(data, 'application/xml');

 

        //Legge tutti i nodi

        const elementi = xmlDoc.getElementsByTagName('*');

        for (let i = 0; i < elementi.length; i++) {

          console.log(`Nodo: ${elementi[i].nodeName}, Contenuto: ${elementi[i].textContent}`);

        }

      },

      error: (error) => {

        console.error('Si è verificato un errore:', error);

      }

    });

  }

 

Ora non resta che eseguire la nostra funzione appena creata. Nell'evento NgOnInit, o nell'evento click di un pulsante o altra parte, richiamiamo tale funzione.

Di seguito l'esempio di tale utilizzo.

TypeScript:

 

 ngOnInit(): void {

    this.leggiFileXML();

 

   }