logo标签列表

Node.js - 使用ejs创建动态列表

javascriptnode.jsejs
4

例如，我有一个数组：

const arr = ['foo', 'bar', 'baz'];

arr 的长度可以是任意的，这只是一个示例。我应该如何通过ejs将arr动态添加到列表中。

我知道我可以这样做：

// index.ejs
<!doctype html>
<html>
    <body>
        <ul>
            <li><%= item %></li>
        </ul>
    </body>
</html>

// app.js
res.render('index', {
    item: arr[0]
})

这将只呈现数组中的第一个项目。如何使其最终呈现如下：

<html>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>
3个回答
5
您可以在ejs中像JavaScript一样使用数组的forEach方法。
<ul>
  <% arr.forEach((item) => { %>
    <li><%= item %></li>
  <% }) %>
</ul>

这将解决你的问题。

你应该添加测试来检查 arr 是否存在，以便在没有数组（数组为 undefined）或其长度为零时不会尝试迭代它。 可能会发生这样的情况，即你在某个时候向视图发送了数组的 undefined 值。

res.render('index', { arr: undefined });

在这种情况下，如果你不进行检查，你的视图将会崩溃，因为undefined没有forEach方法。
<% if (arr && arr.length) { %>
  <ul>
    <% arr.forEach((item) => { %>
      <li><%= item %></li>
    <% }) %>
  </ul>
<% } %>

为了使上述代码正常工作，您需要将整个数组传递给视图。

res.render(index, { arr });
3
传递数组到视图。
// app.js
res.render('index', {
    arr
})

遍历它

<ul>
<% for(var i=0; i<arr.length; i++) {%>
   <li><%= arr[i] %></li>
<% } %>
</ul>
3
另一种方法是映射。
 //app
 res.render('index',{ arr })

地图

 <html>
  <body>
    <ul>
        <%arr.map( item => {%> 
           <li><%= item%></li>
        <%})%>
    </ul>
 </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接