Node ejs forEach causing a 'Content Security Policy' error - node.js

Question

I'm so excited to post my first Stack Overflow query. :D
I recently started a Node.js course and with that, I just want to point out I'm not doing any hardcore stuff just yet.
I have a local node server running with nodemon. I started working with ejs and discovered that a forEach loop is melting my web page for some reason.
I tried doing research and sifting through my code removing certain parts piece by piece that weren't there before the issue until the issue went away and discovered that when I take the forEach loop out of my code in my ejs file, the problem goes away.
//this is my .js file located in my ./routes folder
const express = require('express');
const router = express.Router();
const admin_data = require('./admin');
router.get('/', (req, res, next) => {
const products = admin_data.products;
res.render('shop', {
page_title: 'Shop',
prods: products
});
});
//nothing too hectic.
//this is my ejs file located in my ./views folder.
<% if (prods.length > 0) { %>
<div class="grid">
<% forEach (var products in prods) { %> //if i remove this and it's closing '}' it works fine.
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!
</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% } %>
</div>
<% } %>
I expect the code to render the page but instead receive an error:
"SyntaxError: Unexpected token { in C:\Users\Ruan
Buitendag\Documents\NodeJS\Practice Server\views\shop.ejs while
compiling ejs" in my vscode terminal and "Content Security Policy: The
page’s settings blocked the loading of a resource at inline
(“default-src”)" in my browser console.
EDIT: PS. I tried running the page in firefox developer edition, plain firefox and google chrome.

Answer 1

I think the problem is in your loop. Use forEach this way:
<% prods.forEach(function(product) { %>
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% }) %>
Alternatively you can use for...of loop like this:
<% for (var product of prods) { %>
...