Iterazioni facili facili con jade

Un breve post solo per mostrare come si itera una collezione di oggetti da un template jade.

Spesso ci troviano nella condizione di dover mostrare dati dinamici in forma tabellare.

Con express e jade è molto semplice: basta preparare un array di oggetti e renderlo disponibile al template jade.

Ho aggiornatato l'applicazione su https://whispering-peak-1284.herokuapp.com/, il primo link del menù rimanda ad una pagina che visualizza una tabella di libri preparata nella funzione di callback che gestisce la richiesta: in questo caso ho cablato l'array nel codice, in futuro vedremo come recuperarlo da una base dati

 app.get('/pagina1', function(req,res) {  
      res.render('pagina1', {libri: [{  
           titolo: 'Il signore degli anelli',  
           autore: 'Tolkien'  
      },{  
           titolo: 'Guerra e pace',  
           autore: 'Tolstoj'  
      }, {  
           titolo: 'Javascript the good parts',  
           autore: 'Crockford'  
      }]});   
 });   

Basta passare, nel metodo render, un oggetto javascript con le prorprietà che vogliamo mettere a disposizine per il template jade.

Nel template jade, vi ricordo di spulciare la documentazione per i dettagli, si usa il costrutto each

 block contenuti-principali  
        ...
        p.text-info  
           if (libri)  
                table(class='table table-striped')  
                     each libro in libri  
                          tr  
                               <td>#{libro.titolo}</td>  
                               <td>#{libro.autore}</td>  
           else  
                p.text-info Non ci sono libri in biblioteca
        ...

Testiamo la presenza di una proprietà libri e se c'è generiamo le righe dinamiche della tabella con il costrutto each oggetto in nomeaarray

Ho aggiornato su github il progetto installato su heroku, in modo che possiate avere tutto il codice a disposizione, in questo post è spiegato come utilizzare github.

Fate il pull del progetto, se volete eseguire il programma in locale digitate node app.js e puntate il browser all'indirizzo http://localhost:5000.

Alla prox
Ivan