显示从express传递到ejs模板的数组中的单个项，并使用下一步按钮切换单个项
在Express中，我们可以将数据传递到EJS模板中，并在模板中显示数组的单个项。下面是实现这个功能的步骤：
- 首先，确保你已经安装了Express和EJS模板引擎。你可以使用以下命令进行安装：
npm install express ejs- 创建一个Express应用，并设置EJS作为模板引擎：
const express = require('express');
const app = express();
app.set('view engine', 'ejs');- 创建一个路由处理程序，用于处理请求并将数据传递到EJS模板中：
app.get('/', (req, res) => {
const items = ['Item 1', 'Item 2', 'Item 3']; // 假设这是要传递的数组
res.render('index', { items }); // 将数组作为对象的属性传递给模板
});- 创建一个EJS模板文件（例如index.ejs），并在模板中使用EJS语法来显示数组的单个项：
<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>显示单个项</title>
</head>
<body>
<h1>单个项：</h1>
<% for(let i=0; i<items.length; i++) { %>
<p><%= items[i] %></p> <!-- 使用<%= %>来显示数组的单个项 -->
<% } %>
<button onclick="next()">下一步</button> <!-- 添加一个按钮用于切换单个项 -->
<script>
function next() {
// 在这里编写切换单个项的逻辑
}
</script>
</body>
</html>以上步骤完成后，当你访问应用的根路径时，Express将渲染index.ejs模板，并将数组的单个项显示在页面上。你还可以根据需要自定义切换单个项的逻辑。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
腾讯云云服务器（CVM）产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
相关·内容
在这里，我定义了一个查找问题数组中所有项的路由，这个数组然后被传递给ejs模板，这里的问题是我想在ejs页面上呈现单个项，而不是所有项，使用next按钮，这个按钮应该切换下一个单个项I have includedres.render('game', { q
浏览 26提问于2020-09-04得票数 0
在用户登录后，我试图删除登录/注册按钮，但我似乎无法理解如何删除。这是我想要更改的头文件的一部分。，它将req.session.user_id设置为用户的id。var express = require('express');var db = require('..req.session.user_id传递给头文件，但我不确定如何传递</em
浏览 3提问于2017-11-01得票数 1
1回答
在EJS模板中，我有一个按钮，它在单击时调用一个Javascript函数，该函数对JSON数组对象执行一些计算，并在html DIV元素上显示计算出的值。我在stackoverflow中看到了类似的问题，但我没有看到任何正确的解决方案 将JSON数组对象从node js路由器传递到ejs模板的代码如下所示。文件(gallery.
浏览 25提问于2019-09-09得票数 1
我已经成功地创建了一个帮助器和函数，它们使用handlebars.But在样式列表中显示来自json文件的数据。我正在努力处理我的code.Basically的view more部分。我想要实现的是，如果用户单击一个列表项，handlebars应该获取该项的id并将其显示在不同的page.My控制台上正确地显示新页面(视图详细信息页)上单击的每个项的</e
浏览 5提问于2017-02-12得票数 0
我必须开发一个使用循环导航的WP8应用程序。我来自安卓，也是WP8的新手，所以如果我说了一些愚蠢的话，请原谅。当用户启动我的应用程序时，他从A.xaml页面开始，然后他可以用左按钮导航到C.xaml，或者用右按钮导航到B.xaml。我有3个整数: NA，NB和NC，只能分别在A，B或C中修改，但在所有3个中都显示，所以我总是传递这些参数。我认为我一直在堆叠像ABCA这样的<
浏览 2提问于2015-01-29得票数 0
1回答
对象在ejs文件中未被解析。
、、、、
我正在使用MongoDB、node.js和express构建一个电影数据库。我目前有两条路线，一条呈现显示数据库中所有电影的页面，另一条显示单个电影的信息。问题是，当使用ejs为每个单独的电影呈现页面时，我无法解析传递的对象，该对象包含标题、年份和一些图像数组。
当呈现“所有电影”页面时，我能够解析对象并使用ejs</e
浏览 2提问于2020-08-19得票数 1
回答已采纳
我使用NodeJS调用一些API，并使用以下代码通过ExpressJS将它们传递给我的EJS模板：res.render('routes在我的EJS模板中，我可以通过在两个数组上运行forEach来获取数据。我面临的问题是，当我第一次启动我的</e
浏览 7提问于2016-12-21得票数 3
回答已采纳
2回答
我想弄清楚如何在node.js中使用ajax --我现在已经有了这个问题。例如，当我按下名为Press的按钮时，如何在div id="champ“中显示id=和order1.name。app.jsvar app = express();app.s
浏览 2提问于2016-12-28得票数 6
回答已采纳
在prepareForSegue方法中，我经常推送一个UINavigationController。我使用一个视图控制器数组来设置UINavigation控制器的UINavigation数组，该数组是基于自定义初始化器在自定义对象中填充的。最初，我得到了UINavigationController和所有的UIViewContorllers，但是UINavigationConotrller从数组中<e
浏览 2提问于2013-11-19得票数 1
回答已采纳
我的依赖项是EJS、Express和Mongoose。
我试图弄清楚如何创建一个由另一个Select/选项动态驱动的表单/Select/选项。在我的app.js中，我有两个不同的数组，optionOneList和optionTwoList，它们是在查询数据库时创建的。我希望在为第二个EJS模板部分创建选项时使用optionOneLis
浏览 1提问于2022-08-22得票数 0
此管道遍历数组中的每个对象，并修改该对象的“name”属性以限制显示的字符数： ` viewImagesArr = [...viewImagesArr, viewImage]; return viewImagesArr;` 在HTML模板中，我这样使用它： `
*
浏览 9提问于2019-04-23得票数 0
回答已采纳
如何将从index/item 0开始的数组中的单个项值传递到函数中，并遍历该数组，直到传递完所有项？这个脚本的目的是从一个名为array_list的文本文件中提取行，并将它们传递到一个数组中，然后在一个循环中对每个数组项执行一个函
浏览 0提问于2015-02-08得票数 1
1回答
我将我的代码从Windows 8.1 (MDL)迁移到Windows 10 (UWP)。在MDL中，你可以用手指在滚动的相反方向滑动，它会在ListView中选择项目。奇怪的是，它仍然可以在鼠标上使用，但不能在我的Surface上使用手指手势。你知道这个功能到哪里去了吗，以及如何重新获得用手指手势进行选择的能力？
浏览 1提问于2018-06-11得票数 0
2回答
我是node.js的初学者，我正在尝试创建一个简单的本地托管网页，它可以自动刷新(DOM)并显示通过POST/GET请求接收到的信息。我已经用谷歌搜索了几个小时，但没有找到任何有用的东西。我甚至不确定node.js是不是用来做这种事情的。<!
浏览 5提问于2018-07-23得票数 2
我是新来的反应-春天。每当组件卸载时，我都很难将其动画化。我有一个简单的卡片，它有一个onClick处理程序，负责有条件地显示覆盖组件。动画在安装时工作良好(从和输入作品)，但是当关闭覆盖时，组件就会消失而没有动画(离开不起作用)。我怀疑这是因为组件的有条件呈现，但我已经挣扎了几个小时，试图为这个组件找到一个解决方案。当前代码： 后者使用的是mauerwerk的库。我不想用那个。
浏览 2提问于2019-09-16得票数 3
回答已采纳
我试图将我的第一个模块发布到NPM，它使用EJS模板进行标记，它使用另外两个标记的npm模块和ejs，我在package.json文件中将这些模块作为依赖项。然而，当我试图通过将模块放入测试应用程序的package.json并执行npm install -d安装时，它会安装，但它不会安装它的依赖项，如果我进入测试应用程序根目录node_modules目录，然后进入
浏览 2提问于2013-05-18得票数 3
回答已采纳
我有一个使用UI-路由器的应用程序。string[]}", component: Widgets, params: { isArray: true, }对空数组或具有多个项的数组进行路由到此状态</a>
<a uiSref="widgets" [uiParams]="{ widgets: ['foo','bar&
浏览 2提问于2020-06-29得票数 1
我遇到了一个问题--我从服务类中获得JSON，我能够将整个对象写入控制台，我能够显示根级别的值，但是对于嵌套的值，我得到的是[object Object]，或者完全没有；取决于各种方法。我试图在StackOverflow上找到一个解决方案，它们似乎都指向使用管道。这也是你在我的案子中提出的吗？这是我的代码：
在父组件中，我只需将对象传递给子组件：
`<app-item *n
浏览 2提问于2017-02-21得票数 1
回答已采纳
我正在编写一个WPF应用程序来显示公司的员工列表。我的视图模型基本上是一棵树。在控件模板中，我将项绑定到员工列表，并使用ItemsPresenter中的自定义EmployeeViewControl来显示每个员工的内容。
一切都很好。现在我需要从CompanyViewControl向EmployeeViewControl传递一个特殊的</e
浏览 5提问于2011-06-23得票数 0
回答已采纳
1回答
如果用户在引导表单域中输入的URL字符串不是有效的URL，我尝试有条件地显示一条错误消息。根据express-validator文档，我将错误作为错误对象数组从validationResult发送到EJS模板。我还验证了其他表单字段，因此数组中可能存在多个错误。errors.isEmpty()) {
浏览 18提问于2020-12-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
