I want to get values from an external JSON file and use these values in my EJS file which is compiled as HTML by webpack.
My JSON & EJS working properly.
I trying things like that in my EJS :
<%=
require('./components/products.json')
%>
But the only output (in a HTML file) i get at the render is :
"components/products.json"
I've tried to use Fetch but at bundle time Webpack don't recognize it. And also tried to pass it in a variable but same result.
The objective is to display images's URL contained in the JSON to require them as image's src in the EJS file.
Finally, i've find a proper solution. For future people who will come here :
Everything happens in webpack.config.js
1) In a first time i require my JSON file :
const productsJson = require('.src/components/products.json')
2) Then i add the following code in my plugins array :
new HtmlWebpackPlugin({
template: './src/index.ejs',
templateParameters: {
'myJSON': productsJSON
}
})
3) Finally, In the index.ejs
isn't needed to require the file, it's already loaded by the webpack.config.js
. To display the JSON content, you simply need to do the following line :
<%= myJson.anything_In_My_Json %>