Node.js - 使用 ejs 的动态列表答案

【问题标题】：Node.js - Dynamic list using ejsNode.js - 使用 ejs 的动态列表
【发布时间】：2018-12-23 05:35:18
【问题描述】：

我有一个这样的数组，例如：

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

arr 可以有任意长度，我只是以此为例。我将如何动态地将arr 添加到 ejs 的列表中。

我知道我可以这样做

// 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>

【问题讨论】：

标签： javascript node.js ejs

【解决方案1】：

您可以在 ejs 中使用数组的 forEach 方法，就像在 JavaScript 中使用它一样

<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 });

【讨论】：

【解决方案2】：

将数组传递给视图

// 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>

【讨论】：