Creazione di una tabella contenente dati di file XML

Creare una tabella contenente diversi dati provenienti dal file XML può essere utile per rappresentarli in modo chiaro all'utente

File index.html

						
<!-- RIGA E COLONNA -->
<div class="row">
	<div class="col-12">

		<!-- TABELLA -->
		<div class="table-container table-responsive">
			<table id="tabella tab">

				<!-- TAB HEADER -->
				<thead>
					<tr>
						<th>
							<div class="d-flex justify-content-center header bordi">TITOLO</div>
						</th>
						<th>
							<div class="d-flex justify-content-center header bordi">GENERE</div>
						</th>
						<th>
							<div class="d-flex justify-content-center header bordi">ANNO</div>
						</th>
					</tr>
				</thead>

				<!-- TAB BODY -->
				<tbody id="myTable"></tbody>

			</table>
		</div>
	</div>
</div>
						
                    

File script.js

						
//FUNZIONE CARICA (richiamata nel body)
const carica = () => {
    
    //SCARICO E PARSO IL CONTENUTO
    fetch(URL)
        .then((catalogo) => catalogo.text())
        .then((dati) => {

            //CREO UN OGGETTO DOM PARSER
            let mioXML = new DOMParser();
            //PARSING DEL TESTO
            let parseXML = mioXML.parseFromString(dati, "text/xml")
            
            //VADO A CREARE DELLE VARIABILI NELLE QUALI SALVERO I DATI DEI FILM
            let titoli = parseXML.querySelectorAll("titolo")
            let genere = parseXML.querySelectorAll("generi genere")
            let anno = parseXML.querySelectorAll("anno")
            let insert = ""

            //SELELZIONO IL "BODY" DELLA TABELLA (create nel file index.html)
            const tabellaDati = document.querySelector("table tbody");

            //CICLO PER IL NUMERO DI TITOLI PRESENTI NELL'ELENCO
            for (let i = 0; i < titoli.length; i++) {
                insert += "<tr class='effect'>";
                insert += `<td>${titoli[i].innerHTML}</td>`
                insert += `<td>${genere[i].attributes.value.textContent}</td>`
                insert += `<td>${anno[i].attributes.value.textContent}</td>`
                insert += "</tr>";
            }

            //INSERISCO I DATI NELLA TABELLA
            tabellaDati.innerHTML = insert;

        })
}
						
					

All'interno del file js vado a parsare il file XML, dopo di che ciclo per il numero di titoli presenti nell'elenco (= ciclare per il numero di film registrati dato che ogni film ha un titolo) e vado ad inserire nelle rispettive variabili i dati del film (quando vado a salvare i dati nelle variabili mantengo i dati scritti precedentemente (+=)), terminato il ciclo for vado ad inserire i dati all'interno della tabella (per la precisione nel body della tabella)