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();
}