I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Come inserire dati a una lista in HTML da un oggetto Javascript

In questo articolo vedremo come inserire degli elementi <li> in una lista creata in HTML, in modo dinamico utilizzando Javascript. Innanzitutto creiamo il nostro oggetto Persona che avrà un nome, un cognome, un'età e il sesso, tramite una funzione Javascript che avrà anche alcuni metodi get, in questo modo:

function Persona(nome, cognome, eta, sesso){
                this.nome = nome;
                this.cognome = cognome;
                this.eta = eta;
                this.sesso = sesso;
               
                this.getNome = function(){
                    return this.nome;
                };
                this.getCognome = function(){
                    return this.cognome;
                };
                this.getEta = function(){
                    return this.eta;
                };
                this.getSesso = function(){
                    return this.sesso;
                };
 }

Supponiamo quindi di dover riempire il div seguente, con id "test", con il contenuto degli oggetti persona che istanzieremo in seguito:

<div id="test">

</div>

A questo punto istanziamo gli oggetti persona1 e persona2 assegnandogli dei dati in questo modo:

var persona1 = new Persona("Renzo", "Cappelli", "23", "M");
var persona2 = new Persona("Alessia", "Reato", "23", "F");

Di seguito scriviamo il codice Javascript che immette nel div gli elementi ul e li della lista HTML:

var obj = document.getElementById("test");
           
var ulannidato = document.createElement("ul"); //creiamo l'elemento ul nel DOM
           
var persone = [persona1, persona2];
for(var i=0; i<persone.length; i++){
    var liannidato = ulannidato.appendChild(document.createElement("li"));
        liannidato.appendChild(document.createTextNode(persone[i].getNome() + " " + persone[i].getCognome())); //appendiamo e riempiamo gli li
}
obj.appendChild(ulannidato);

Fatto questo avremo una lista dentro il div con id "test" riempita con i dati degli oggetti istanziati (persona1 e persona2). Si poteva fare la stessa cosa prendendo i dati da un'array JSON o da altre fonti come un feed RSS ma la sintassi per riempire la lista sarà uguale.

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento