如何重构我的“视图”代码以每年显示项目？答案

【问题标题】：How can I refactor my 'view' code to display items per year?如何重构我的“视图”代码以每年显示项目？
【发布时间】：2019-04-11 03:40:07
【问题描述】：

我想重构一段代码，以便每年显示/重新组合我的项目，而无需每年重复代码。到目前为止，我已经尝试循环多年，但似乎没有奏效。

这是我目前在“视图”文件（ejs 模板）中重复 8 年的代码：

<ul><h3>YEAR 2017:</h3>
 <% items.forEach(function(el){ %>
  <% if(el.date.substring(7, 11) == "2017"){ %>
   <li><%= el.date %>: 
   <% if(el.url){ %>
    <a href="<%= el.url %>" title="<%= el.title %>"><%= el.title %></a>,
   <% }else{ %> 
    <%= el.title %>,
   <% } %>
   <% if(el.by){ %>
    <%= el.type %>, <%= el.by %>
   <% }else{ %>
    <%= el.type %>
   <% } %>
   @ <%= el.location %></li>
  <% } %>
 <% }); %>
</ul>

【问题讨论】：

标签： javascript express mongoose ejs

【解决方案1】：

通过使用 ejs 模板和数组，您似乎已经走上了正确的道路。也许您应该重新构造传递项目的方式，以便它们像这样位于对象数组中

items = [{"year": 2016, "items": [item1,item2...]},{"year":2017, "items": [item1,item2..]}, ... ]

然后你可以这样循环它们：

<% items.forEach(function(year){ %>
    <ul><h3>YEAR <%= year.year %>:</h3>
        <% year.items.forEach(function(el){ %>
        ...
        <% } %>
<% } %>

【讨论】：

【解决方案2】：

可能是这样，请转换成eje语法：

let arr = []

let arrEl = items.map(function(el, index){
  return el.date.substring(7, 11);
})
arr.push(arrEl)

for (let i=0; i<arr.length; i++){
  items.map(function(element, index){
    if(el.date.substring(7, 11) == arr[i]){
      //show your el
    }
  })
}

【讨论】：