嵌套的 EJS 模板循环答案

【问题标题】：Nested EJS Template Loops嵌套的 EJS 模板循环
【发布时间】：2023-03-21 19:58:01
【问题描述】：

我正在尝试访问 EJS 模板中的嵌套数组。在我的后端，我正在渲染这个，'lists' 是一个业务数组，userId 是会话中的用户 _id。

res.render('listOfBusinesses', {lists:business, userId:loggedUserID});

在前端，我正在遍历列表并获取正确的属性值，但是一个属性是一组关注者_id，我需要与 userId 交叉检查以提供关注按钮或取消关注按钮。

前端是这样的：

<% for (var i = 0; i < lists.length; i++) { %>

  <div class="col-xs-6 col-sm-4 panel">
     <a href="/busProfileFromUser?busId=<%= lists[i]._id %>">
      <img src="<%= lists[i].imgpath %>" class="img-responsive follow-img" />
     </a> 
  </div>

以上内容按预期工作，但属性 lists[i].followers 是一个数组，我需要再次循环，但无法获得正确的语法。

我的想法是这样的：

for (var i = 0; i< lists[i].followers.length; i++){

  if (list[i] == userId) {
    <button>Follow</button>
  } else {
    <button>Unfollow</button>
  }
}

非常感谢任何建议！

几乎解决了这个问题，卡住了一段时间，但部分问题是在条件语句中使用了传递给渲染的变量，该条件语句正在检查对象 id 是否等于字符串。所以我打电话给 toString() 以确保它们是字符串。它现在返回正确的按钮，但是它只返回一个按钮，并且没有为其余的企业列表显示任何内容。任何人都可以解释为什么其他按钮没有显示

        <% for (var j = 0; j < lists[i].followers.length; j++) {%>

            <% if (lists[i].followers[j].toString() == userId.toString())           { %>
              <button>Unfollow</button>

              <% } else { %>
                <button>FOLLOW</button>
              <% } %>

        <% } %>

【问题讨论】：

标签： node.js templates ejs

【解决方案1】：

EJS 完全支持嵌套循环和条件。一旦你遍历了一个列表，你可以获取另一个迭代变量并创建一个嵌套循环。

<% for (var i = 0; i < lists.length; i++) {%>
  <a href="/busProfileFromUser?busId=<%= lists[i]._id %>">
    <img src="<%= lists[i].imgpath %>" class="img-responsive follow-img" />
  </a>

  <!-- Nested loop below --> 
  <% for (var j = 0; j < lists[i].followers.length; j++) {%>
    <li>
      <% if (lists[i].followers[j] == userId) { %>
        <button>Follow</button>
      <% } else { %>
        <button>Unfollow</button>
      <% } %>
    </li>
  <% } %>

<% } %>

【讨论】：

谢谢这看起来像我需要的语法，它几乎可以工作，由于某种原因它根本没有呈现第二个条件。我设置了 5 个虚拟企业，其中用户关注 2 个，2 个按钮正在渲染，但其他按钮没有。
听起来这个问题更具体一些，并且取决于渲染模型。如果我能看到这些数据，我只能为您提供进一步的帮助，因为在 EJS 方面它应该可以正常工作。
尝试使用该数据、预期结果和结果更新您的问题。
在此代码中发现了另一个问题，即 if 语句中的 userId - 它没有正确读取它，是否应该更改语法以读取条件语句中的变量？
这不会造成问题，因为您在渲染器中添加了userId。

【解决方案2】：

您需要将i 更改为其他内容，因为它会覆盖外部范围循环中的i。

您也没有访问 followers 属性。

你的内部循环应该是这样的：

<% for (var j = 0; j < lists[i].followers.length; j++) { %>
  <% if (list[i].followers[j] == userId) { %>
    <button>Follow</button>
  <% } else { %>
    <button>Unfollow</button>
  <% } %>
<% } %>

【讨论】：

【解决方案3】：

    //Controller Side 
     var sidebarnavigation = req.session["sidebarnavigation"];
      res.render(view_path, {
        TODAY_DATE: TODAY_DATE,
        base_URL: base_URL,
        navigations: sidebarnavigation,
      });
    
    
    Nested Loops In EJS
    <body class="mini-sidebar">
        <div class="main-wrapper">
          **<!-- sidebar menu -->
          <%-include("../partials/common_sidebar_nav",{"navigations":navigations})%>**
        </div>
//Partial Section

        <div id="sidebar-menu" class="sidebar" style="cursor: pointer;">
          <div class="sidebar-inner slimscroll">
              <div id="sidebar-menu1" class="sidebar-menu">
                  <ul>            
                    <% navigations.forEach(function(menu){%>                
                            <li class="menu-title"><%= menu.role_name %><span></li>
                                <% menu.main_menu.forEach(function(main_menu){ %>
                                    <li class="submenu">
                                        <a href="#">                                    
                                            <span><%= main_menu.nav_display_name %> </span><span class="menu-arrow"></span>
                                        </a>                                
                                        <ul style="display: none;">
                                            <% main_menu.sub_menu.forEach(function(sub_menu){ %>
                                                <li>
                                                    <a>
                                                        <i class="la la-minus"></i>&nbsp; <%= sub_menu.nav_display_name %>
                                                    </a>
                                                </li>
                                            <%})%>                                    
                                        </ul>
                                    </li>
                                <%})%>
                    <%})%>
                    
                  </ul>
              </div>
          </div>
        </div>

【讨论】：

除了发布一些代码之外，您还应该解释这应该如何回答问题。