How to Update Express res.render local variable?

Question

i'm new on node js and Express. I maked a node js app using express, I use hbs handlebars to display my local variable that I pass through my res.render in a app.get function.

app.get("/", checkAuthenticated, (req, res) => {
var navbar = navbarUpdate();  
res.render("index.html", { title: "General", username: req.user.username, navbar: navbar }); 
});

My local variable navbar is a json object that can change, I create my navigation bar from this object, how can I automatically update my navigation bar without refreshing my whole page ?

My html looks like that :

<nav>
    <ul id="menu">
        <li class="img-menu"><img class="logo" src="/img/logo-kogimanager-longueur-transp-220x49.png"></li>

        <li class="main-menu"><a href="/">GENERAL</a></li>
        {{#each navbar}}
        <li class="main-menu">
            <a id="parent" href="/stair/{{@key}}">{{@key}}</a>
            <ul>
                {{#each this}}

                <li>
                    <a>CHAMBRE {{@key}}</a>
                    <ul>
                        {{#each this}}

                        <li><a href="/{{this.stair}}/{{this.room}}/{{@key}}">{{@key}}</a></li>

                        {{/each}}
                    </ul>
                </li>

                {{/each}}
            </ul>
        </li>
        {{/each}}
        <li class="main-menu"><a href="/history">HISTORIQUE</a></li>
    </ul>
    <li class="main-menu"><a href="/config">CONFIGURATION</a></li>
</nav>

I have other parts of in the html body that I need to update in real time.

I tried with socket.io but I didn't really understand how can I update my data in my front end...

If somebody can help me, Thank you in advance for your help

Answer 1

i'm new on node js and Express. I maked a node js app using express, I use hbs handlebars to display my local variable that I pass through my res.render in a app.get function.

app.get("/", checkAuthenticated, (req, res) => {
var navbar = navbarUpdate();  
res.render("index.html", { title: "General", username: req.user.username, navbar: navbar }); 
});

My local variable navbar is a json object that can change, I create my navigation bar from this object, how can I automatically update my navigation bar without refreshing my whole page ?

My html looks like that :

<nav>
    <ul id="menu">
        <li class="img-menu"><img class="logo" src="/img/logo-kogimanager-longueur-transp-220x49.png"></li>

        <li class="main-menu"><a href="/">GENERAL</a></li>
        {{#each navbar}}
        <li class="main-menu">
            <a id="parent" href="/stair/{{@key}}">{{@key}}</a>
            <ul>
                {{#each this}}

                <li>
                    <a>CHAMBRE {{@key}}</a>
                    <ul>
                        {{#each this}}

                        <li><a href="/{{this.stair}}/{{this.room}}/{{@key}}">{{@key}}</a></li>

                        {{/each}}
                    </ul>
                </li>

                {{/each}}
            </ul>
        </li>
        {{/each}}
        <li class="main-menu"><a href="/history">HISTORIQUE</a></li>
    </ul>
    <li class="main-menu"><a href="/config">CONFIGURATION</a></li>
</nav>

I have other parts of in the html body that I need to update in real time.

I tried with socket.io but I didn't really understand how can I update my data in my front end...

If somebody can help me, Thank you in advance for your help