如何从express.js传递数据数组到ejs模板并渲染它们

Question

如何从express.js传递数据数组到ejs模板并渲染它们

5

我在我的Node.js网页应用程序中使用express.js，用户输入一些条件，然后程序获取像这样的数据数组：

var data = [
  {
    name: 'Salmons Creek',
    image: 'https://farm6.staticflickr.com/5479/11694969344_42dff96680.jpg',
    description: "Great place to go fishin' Bacon ipsum dolor amet kielbasa cow"
    },
  {
    name: 'Granite Hills',
    image: 'https://farm5.staticflickr.com/4103/5088123249_5f24c3202c.jpg',
    description: "It's just a hill.  Made of granite.  Nothing more! Cow doner."
    },
  {
    name: 'Wildwood Miew',
    image: 'https://farm5.staticflickr.com/4016/4369518024_0f64300987.jpg',
    description: 'All campsites.  All the time.Short ribs pastrami drumstick.'
    },
  {
    name: 'Lake Fooey',
    image: 'https://farm7.staticflickr.com/6138/6042439726_9efecf8348.jpg',
    description: 'Hills and lakes and lakes and hills.  Pork ribeye pork chop.'
    }
];

我想使用EJS模板语言渲染数组中的所有对象。我该如何将数据传递给模板并进行渲染？

- vag

如何精确地呈现它们？只是作为字符串，在元素中吗？您需要给我们一个您想要的输出示例。 - adeneo

1

可能是通过EJS模板传递变量的重复问题。 - ponury-kostek

大多数模板引擎都有所谓的上下文。在ejs中，它是render方法的第二个参数。因此，您可以执行类似于res.render('page1', {data:data})的操作。然后，数据应该可用于您的EJS脚本。 - Keith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Víctor Beltrán · Accepted Answer

在你的js文件中，应该这样渲染ejs:

var express = require('express');
var app = express();
var path = require('path');

// viewed at http://localhost:8080
app.use("/", express.static(__dirname + '/'));
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
var data = [
{
  name: 'Salmons Creek',
  image: 'https://farm6.staticflickr.com/5479/11694969344_42dff96680.jpg',
  description: "Great place to go fishin' Bacon ipsum dolor amet kielbasa cow"
  },
{
  name: 'Granite Hills',
  image: 'https://farm5.staticflickr.com/4103/5088123249_5f24c3202c.jpg',
  description: "It's just a hill.  Made of granite.  Nothing more! Cow doner."
  },
{
  name: 'Wildwood Miew',
  image: 'https://farm5.staticflickr.com/4016/4369518024_0f64300987.jpg',
  description: 'All campsites.  All the time.Short ribs pastrami drumstick.'
  },
{
  name: 'Lake Fooey',
  image: 'https://farm7.staticflickr.com/6138/6042439726_9efecf8348.jpg',
  description: 'Hills and lakes and lakes and hills.  Pork ribeye pork chop.'
  }
];
res.render('index.ejs', {data:data} );
});

app.listen(8080);

在你的ejs文件中，你可以像这样渲染数据变量：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <ul>
    <% data.forEach(function(dat) { %>
        <li><%= dat.name %></li>
        <li><%= dat.image%></li>
        <li><%= dat.description%></li>
    <% }); %>
  </ul>
 </body>

</html>

我已经尝试过并且它有效。

文件夹的结构如下:

.
+-- app.js
+-- views
|   +-- index.js