I have some JSON that looks a little like this:
component.json
[
{ "template": "<div class="${layout} ${border}"></div>" },
{
"layout": "grid",
"border": "primary"
}
]
I'm using this JSON to generate some HTML via JS, and I can't work out how to turn "layout" and "border" into variables that I can then add into my template string.
For context I can't just hard code the variables, in my JSON I can't predict how many variables there will be or what they are.
I'm trying something like this:
const template = componentJSON[0].template
const classes = componentJSON[1]
for (const [key, value] of Object.entries(classes)) {
eval('var ' + `${key}` + ' = ' + '"' + `${value}` + '"')
}
let html = eval('`' + template + '`')
I am aware of the EVIL that is eval, so I'm happy to hear other solutions, but also happy to hear options with eval as this will never be exposed to attacks.
I'm not sure why my for loop that should create the variables using eval isn't working? Maybe eval is built specifically not to create variables? Could I use new Function() instead somehow?
For the reference the result I'm hoping for should be:
<div class="grid primary"></div>
There's no need to use
eval()
for this. Use thereplace()
method with a regexp that matches${...}
and replaces with the corresponding object property.