如何在 EJS 模板中显示这个？

Question

I made a page where I get from database some articles. With the help of underscore and _.groupBy I grouped them by years ( a field in the database ), now they are grouped like this

 { '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 } ] }

All good. They are grouped well, but how can I render this in an EJS File? I did this because I want to make an archive of posts sorted by years like this

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

this is the function that renders that page

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

I'm really bad at Front End and I don't know how to implement in the EJS file this thing, I mean I got all data I need but I don't know how to display it.

<%- 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'); %>

Can you please help me implement that, I mean how to loop through the all years display years then the posts assigned to that year. Thank you in advance!

Ignore the second div I made that just for splitting the page, in the first div I want to put the archive

Answer 1

You can write your code like this

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

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

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

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

    <%}%>

<%}%>

Here you can run a forEach loop on your original array, which gives access you to key & value of every element

Then, you can print key of the element & loop again through value of each element which is also a loop

inside this second loop, you can print title of each post