ejs-html-loader
ejs-html-loader copied to clipboard
mcmath
How can I load a JSON data file into an EJS loader with loader options?
I have these 2 files, products.ejs, and products.json. The template should render the list of products on a grid and output a static html with all products.
products-red.json
[
{
"name": "product 1",
"value": "red"
}
]
products.ejs
<h1><%= products[0].name %></h1>
This would eventually be a for that displays all products, but this is just an example.
I was trying to read the JSON in my webpack index file, and loading it into eJS for each file. I could probably pass the data in the loader options in webpack.config.js, but I want different data for each template (image product categories).
This currently does not work:
index.js (webpack entry)
var products-red = require(./data/products-red.json)
require('index.ejs?products=products-red')
EJS files don't let me require the json file between <% %>, which would have been another option. Is there any way to accomplish this with esl-html-loader?
Maybe I could convert the JSON file to a string, load it as an option, and then convert it to object inside the ejs template. But is there any simpler option?
hi, did you find a way of doing this? Thanks
hi, did you find a way of doing this? Thanks
hi, did you find a way of doing this? Thanks
hi, did you find a way of doing this? Thanks
I did it through an env file :<
hi, did you find a way of doing this? Thanks
hi, did you find a way of doing this? Thanks
I did it through an env file :<
i just written my database in my ejs file after i realized ejs supported inject js variable lol
<%
let brand = "Yummy Treats, Speed Up!";
let desc = "Feeding Your Cat's or Let Them Mess Up!"
%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cat Treats</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<% include ./templates/photo.ejs %>
<div class="intro">
<p class="brand"><%=brand%></p>
<hr class="star-light" />
<p class="desc"><%=desc%></p>
</div>
</body>
</html>