Ejs forEach loop is not defined

So here is my problem I am trying to do a forEach in ejs which will render html onto the page. Here is the store page for the ejs forEach loop.

<% include _includes/header.ejs %>
<div class="container">
<% cards.forEach( card => { %>
<% include('_includes/cards.ejs', card) %>
<% }) %>
</div>
<% include _includes/footer.ejs %>


here is the cards.ejs file

<div class="card" style="width: 18rem;">
<img class="card-img-top" src='' alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><%= titleCard %></h5>
<p class="card-text"><%= desc %></p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>


and finally this

cards = [
{
titleCard: 'title 1',
desc: 'just some text'
},
{
titleCard: 'title 1',
desc: 'just some text'
},
{
titleCard: 'title 1',
desc: 'just some text'
},
]


I have tried multiple things and always get the error that cards is not defined. Where am I supposed to put this? I would really appreciate some help on this!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.