Tips for transitioning to handlebars for data display using mongodb

Seeking help on transitioning from EJS to Handlebars for displaying content. I am relatively new to Node.js and would appreciate any suggestions on how to implement the following code in Handlebars.

Which templating engine is more efficient - EJS or Handlebars?

<% if(files){ %>
              <% files.forEach(function(file) { %>
                <div class="card card-body mb-3">
                  <% if(file.isImage) { %>
                    <img src="image/<%= file.filename %>" alt="">
                    <% } else { %>
                      <%= file.filename %>
                        <% } %>
                          <form method="POST" action="/files/<%= file._id %>?_method=DELETE">
                            <button class="btn btn-danger btn-block mt-4">Delete</button>
                          </form>
                </div>
                <% }) %>
                  <% } else { %>
                    <p>No files to show</p>
                    <% } %>

Answer №1

          {{#each files}}
            <div class="card card-body mb-3">
              {{#if this.isImage}}
                <img src="image/{{this.filename}}" alt="">
              {{else}}
                {{this.filename}}
              {{/if}}
                      <form method="POST" action="/files/{{this._id}}?_method=DELETE">
                        <button class="btn btn-danger btn-block mt-4">Delete</button>
                      </form>
            </div>
           {{else}}
                <p>No files to display</p>
           {{/each}}

Click here to explore a comparison of various JavaScript templating engines.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue.js: Execute a function with a delay, but start the delay over if there is any user input

Imagine a scenario where I have a form that is connected to an API and displays information based on user input. Whenever the user makes changes, such as adjusting the number of results per page, the component should react dynamically by loading new data. ...

Encountering a TypeError in Laravel VueJS testing: Unable to locate _vm._ssrEscape function

I have been trying to set up Mocha tests for Laravel 7 Vue Components by combining different tutorials. Initially, I was able to run a basic test successfully: expect(0).toBe(0); However, when attempting to mount a component, I encountered the following ...

Issue: Unable to locate module 'js-yaml' while executing npm start command

Unable to locate module 'js-yaml' Require stack: D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\loaders.js D:\REACT NATIVE\portfolio\node_modules\cosmiconfig\dist\createExplore ...

What is the best way to securely store a JWT token in an HTTP only cookie?

My approach in building an app involved using a JWT from the server after logging in successfully to authorize access to any /api route on my Express.js backend server. In contrast, AngularJS stored this token in session storage and utilized an auth inter ...

Tips on utilizing recursive Promises within a loop while transferring arguments to another function

Despite searching other threads on SO, I couldn't find a satisfactory answer to my problem. Every solution seems to be missing something essential for my case, especially since none of them address Apple Music specifically. The Apple API relies heavil ...

Running a TypeScript file on Heroku Scheduler - A step-by-step guide

I have set up a TypeScript server on Heroku and am attempting to schedule a recurring job to run hourly. The application itself functions smoothly and serves all the necessary data, but I encounter failures when trying to execute a job using "Heroku Schedu ...

The persistence of req.session in express-session seems to be unreliable

I am facing an issue with my current code implementation. Here is the snippet: var express = require('express'); var cookieParser = require('cookie-parser'); var http = require('http') var app = express(); app.use(cookieParse ...

Exploring ways to bypass authentication using react development tools

Currently, I am delving into the realm of token-based authentication in SPA and a question has been nagging at me. Picture this: in my app, the authentication process works like this - when a user enters correct credentials, they receive a token and the "a ...

What is the best way to store a WAV Blob in MongoDB, fetch it accurately, and serve it using Node

While there are many resources available on saving binary files using the Mongoose Buffer SchemaType, most of them focus on image files. I have encountered difficulties in making it work with a WAV audio file. Currently, I am utilizing Recorder.js to stor ...

Searching for raw queries in Sequelize using Node.js

For a while now, I've been attempting to execute a raw query using sequelize. After following some online guides, this is the code that I have come up with: var sequelize = new Sequelize('name', 'user', 'password'); va ...

"Comparing the use of subdocuments in a MongoDB user collection versus using a

Currently, I am working with meanjs and I have a requirement to store user data in a one-to-many relationship. Even though my scenario is similar to the articles example, articles will only be accessed through the user. I envision the route to look somethi ...

CSS file not loading in an ExpressJS application

I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...

Exploring MongoDB files easily using Angular

I am currently working on implementing a user search feature using Angular to query users from a MongoDB collection. The function on the server side is already operational and functioning correctly with Postman. However, I encountered an error on the clien ...

Receiving and transmitting messages repeatedly in Discord.JS

Currently, I am developing a simple bot. Interestingly, the bot seems to be responding multiple times to a single command. Here is the code snippet: const Discord = require('discord.js'); var bot = new Discord.Client(); const PREFIX = "+"; var ...

What is the advantage of transmitting JWT tokens through the Authorization header instead of within the payload?

One common practice is to include JWTs in the Authorization header, prefaced by the "Bearer" string. What is the reason for this approach, and why not just send the token in the body of a post request? Is there an easy way to authenticate the token in nod ...

How to Add to a Nested Array in Mongoose based on a Condition

Consider the schema below: { userId: docId, skills: [ { _id: SkillId, endorsers: [ { userId: idOfUser } ] } ] } I am trying to ensure that a user cannot endorse a specific skill in a document mult ...

What is the preferred method for preserving environment variables on an AWS EC2 instance?

I'm currently facing an issue with fetching and utilizing environment variables from a .env file in my Node.js application while running it locally using dotenv. Due to security concerns, I cannot commit the .env file to GitHub. When deploying the app ...

I am unable to retrieve any information from the JSON request

When I send JSON data to a specific route, below is the code I use: const data = [{ name: this.name }] axios .post('/users', { name: this.name }) .then( response => { console.log(response.data); } ) ...

Verify if the program is operating on a server or locally

My current project involves a website with a game client and a server that communicate via sockets. The issue I'm facing is how to set the socket url depending on whether the code is running on the server or my local PC. During testing and debugging, ...

Angular application navigation does not work as expected when the application is served in Express.js

I have an Angular 7 application that is running on an ExpressJS server. This is how the server part of the app is set up: app.get('/', (req, res) => { console.log(`sending...`); res.sendFile(path.join(__dirname, 'index.html') ...