search

mcmath / ejs-html-loader

Webpack loader for rendering HTML from EJS templates
MIT License
47 stars 9 forks source link

How can I load a JSON data file into an EJS loader with loader options? #12

Open DamianPereira opened 7 years ago

DamianPereira commented 7 years ago

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?

violetadev commented 5 years ago

hi, did you find a way of doing this? Thanks

carl-jin commented 4 years ago

hi, did you find a way of doing this? Thanks

hi, did you find a way of doing this? Thanks

violetadev commented 4 years ago

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 :<

carl-jin commented 4 years ago

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>