TypeScript read all nodes file XML

Può capitare di avere l'esigenza di leggere tutti i nodi con i relativi valori, di un file XML.

In questo esempio di codice, vediamo come leggere i nodi (diversi tra loro) con i relativi valori.

Si riporta un file XML di esempio che utilizzeremo nella prova

XML.

<dati>

<nodoA>Valore 1</nodoA>

  <nodoB>Valore 2</nodoB>

  <nodoC>

    <sottoNodo>Valore 3</sottoNodo>

  </nodoC>

</dati>

Aggiungiamo al progetto il riferimento alla gestione dei file XML, in particolare le classi che fanno parte di HTTP. 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 di riferimento alla classe httpClient. 

Di seguito il frammento di codice della suddetta dichiarazione.

TypeScript:

 constructor(

    private http: HttpClient

) { }

 

Si crea una funzione, che una volta invocata andrà a leggere il file XML denominato Dati2.xml, situato nella cartella Assets utilizzando le classi "Document"  e "DOMParser".

Di seguito la funzione per la lettura del file XML.

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 siamo giunti al termine della stesura del codice, non resta che invocare la funzione appena creata.

Di seguito il frammento di codice che invoca la funzione appena creata.

TypeScript:

 

 ngOnInit(): void {

    this.leggiFileXML();

 

   }