In questo articolo vedremo come passare dei dati al codice JavaScript lato client nelle view di ExpressJS.

Supponiamo di aver creato una funzione che ottiene l'indirizzo IP di un client.


'use strict';

module.exports = {
    getIP(request) {
        let realIP = request.get('x-real-ip');
        let ip = '';
        if (realIP) {
            ip = realIP;
        } else {
            ip = request.socket.remoteAddress;
        }
        return ip;
    }
};

Passiamo quindi il dato ottenuto alla view collegata alla route.


app.get('/', (req, res) => {
    const ip = getIP(req);
    res.render('index', { ip } );
});

Nella view creiamo un oggetto JavaScript con le informazioni passate.


<body>
<script>
const info = {
    ip: '<%= ip %>'
};
</script>
<main id="site">

    <section id="info"></section>

</main>
<script src="/public/js/index.js"></script>
</body>

L'oggetto info creato può infine essere utilizzato dal codice lato client.


'use strict';

const showInfo = (data, target) => {
    if(data) {
        const element = document.createElement('div');
        element.className = 'alert alert-info';

        for(let prop in data) {
            let child = document.createElement('p');
            child.innerHTML = `<strong>${prop}</strong>: ${data[prop]}`;
            element.appendChild(child);
        }

        target.appendChild(element);
    }
};

document.addEventListener('DOMContentLoaded', () => {
    showInfo(info, document.querySelector('#info'));
});

Demo

Heroku

Codice sorgente

GitHub