Как я могу отобразить это в шаблоне EJS?

Я сделал страницу, где я получаю из базы данных некоторые статьи. С помощью подчеркивания и _.groupBy я сгруппировал их по годам (поле в базе данных), теперь они сгруппированы так

 { '2001':
   [ { _id: 5e286db8a47af74400f4a4f7,
       title: 'Trying to connect to SSH, Permision Denied (public key)',
       typeofdisaster: 'Tsunami',
       year: '2001',
       month: 'December',
       day: '08',
       description: 'ADFASDFASD',
       aditional: 'fdasfas',
       image1:
        'images/2020-01-22T15:43:52.720Z-67287305_1471150326359475_6265289848051990528_o.jpg',
       image2: 'none',
       location: 'Scenic Highhwat 23412',
       postid: 'GyPUk',
       datePosted: '1579707832851',
       __v: 0 } ],
  '2009':
   [ { _id: 5e285af6f4caf441cc9b451f,
       title: 'This is an article',
       typeofdisaster: 'Tsunami',
       year: '2009',
       month: 'March',
       day: '5',
       description:
        'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
       aditional: 'https://www.google.com',
       image1:
        'images/2020-01-22T14:23:50.840Z-67287305_1471150326359475_6265289848051990528_o (1).jpg',
       image2: 'none',
       location: '245 Scenic Highway Lawrenceville, GA',
       postid: 'v6Lih',
       datePosted: '1579703030971',
       __v: 0 },
     { _id: 5e286a5ffeadf743747f7ff6,
       title: 'This is a post',
       typeofdisaster: 'Tornado',
       year: '2009',
       month: 'December',
       day: '08',
       description: 'LOREM IPSUM',
       aditional: 'https://www.google.com',
       image1:
        'images/2020-01-22T15:29:34.965Z-82668748_468933630458447_4082761341385834496_n.jpg',
       image2: 'none',
       location: 'Vasile Alecsandri 16, Campia Turzii, Cluj',
       postid: 'r39GP',
       datePosted: '1579706975104',
       __v: 0 } ] }

Все хорошо. Они хорошо сгруппированы, но как я могу отобразить это в файле EJS? Я сделал это, потому что хочу сделать архив постов, отсортированных по годам, вот так

 2009 
    Post Title
    Post Title 2 
 2005
    Post Title
 2001 
    Post title 
    Post title 2
    Post title 3

это функция, которая отображает эту страницу

exports.getIndex = async (req,res,next) => {

    const authenticated = req.session.isLoggedIn;
    let postLists = [];
      let posts = await Post.find();
      for(let i = 0; i< posts.length;i++) {
        postLists.push(posts[i]);
      }

     console.log(_.groupBy(postLists, 'year'));

res.render('index', {
      pageTitle:'DISASTER DATABASE |  HOME',
      path:'/',
      authenticated: authenticated,
      user: req.session.user,
      posts: _.groupBy(postLists,'year')
    });

У меня очень плохо с Front End, и я не знаю, как реализовать это в файле EJS, я имею в виду, что у меня есть все данные, которые мне нужны, но я не знаю, как их отобразить.

<%- include('./includes/head.ejs'); %>
<main>
 <%- include('./includes/navigation.ejs'); %>

 <div class="split c-archivecontainer">
  <h5 style=" color: #5D4954;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size:15px;
  font-family: 'Poppins', sans-serif;">Disasters archive</h5>
 </div>
 <div class="split c-mapcontainer">
        <h5 style=" color: #5D4954;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size:15px;
        font-family: 'Poppins', sans-serif;">Disasters Map</h5>
 </div>

 <script>


 </script>
</main>
<%- include('./includes/end.ejs'); %>

Не могли бы вы помочь мне реализовать это, я имею в виду, как прокручивать все годы отображения лет, а затем сообщения, назначенные этому году. Заранее спасибо!

Игнорировать второй div, который я сделал только для разделения страницы, в первый div я хочу поместить архив


person Calin Onaca    schedule 23.01.2020    source источник


Ответы (1)


Вы можете написать свой код следующим образом

<% array.forEach((value,key)) { %>

    <h3><%= key%></h3>

    <% for(let elem of value) { %>

    <span><%= elem.title%></span>

    <%}%>

<%}%>

Здесь вы можете запустить цикл forEach для вашего исходного массива, который дает вам доступ к ключу и значению каждого элемента.

Затем вы можете распечатать ключ элемента и снова выполнить цикл по значению каждого элемента, который также является циклом.

внутри этого второго цикла вы можете напечатать заголовок каждого сообщения

person Sarfraaz    schedule 24.01.2020