Node.js - 使用 ejs 的動態列表

Question

我有一個像這樣的數組，例如：

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>

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

Answer 2

將數組傳遞給視圖

// app.js
res.render('index', {
    arr
})

循環它

<ul>
<% for(var i=0; i<arr.length; i++) {%>
   <li><%= arr[i] %></li>
<% } %>
</ul>

Answer 3

另一種方法是映射。

 //app
 res.render('index',{ arr })

地圖

 <html>
  <body>
    <ul>
        <%arr.map( item => {%> 
           <li><%= item%></li>
        <%})%>
    </ul>
 </body>
</html>

Node.js - 使用 ejs 的動態列表

問題描述

3 個解決方案

解決方案1
4 已采納 2018-07-15 13:41:52

解決方案2
1 2018-07-15 13:27:22

解決方案3
1 2018-07-15 13:41:25

Node.js - 使用 ejs 的動態列表

問題描述

3 個解決方案

解決方案1 4 已采納 2018-07-15 13:41:52

解決方案2 1 2018-07-15 13:27:22

解決方案3 1 2018-07-15 13:41:25

解決方案1
4 已采納 2018-07-15 13:41:52

解決方案2
1 2018-07-15 13:27:22

解決方案3
1 2018-07-15 13:41:25