Tengo algo de JSON que se parece un poco a esto:
component.json [ { "template": "<div class="${layout} ${border}"></div>" }, { "layout": "grid", "border": "primary" } ]Estoy usando este JSON para generar algo de HTML a través de JS, y no puedo averiguar cómo convertir "diseño" y "borde" en variables que luego puedo agregar a mi cadena de plantilla.
Por contexto, no puedo simplemente codificar las variables, en mi JSON no puedo predecir cuántas variables habrá o cuáles son.
Estoy intentando algo como esto:
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 + '`')Soy consciente de la MALDAD que es eval, así que estoy feliz de escuchar otras soluciones, pero también feliz de escuchar opciones con eval ya que nunca estará expuesto a ataques.
No estoy seguro de por qué mi ciclo for que debería crear las variables usando eval no funciona. ¿Quizás eval está construido específicamente para no crear variables? ¿Podría usar new Function() en su lugar de alguna manera?
Para la referencia, el resultado que espero debería ser:
<div class="grid primary"></div>No hay necesidad de usar eval() para esto. Utilice el método replace() con una expresión regular que coincida con ${...} y la reemplace con la propiedad del objeto correspondiente.
let componentJSON = [ { "template": "<div class='${layout} ${border}'></div>" }, { "layout": "grid", "border": "primary" } ]; const template = componentJSON[0].template const classes = componentJSON[1] let html = template.replace(/\$\{(.*?)\}/g, (match, key) => classes[key]); console.log(html);