What is the method to retrieve a javascript object from within a string template?

Question

What is the method to retrieve a javascript object from within a string template?

I am trying to find a way to map data from an object into a string template using JavaScript. Here is an example of the string and object I am working with:


const menu = {
   breakfast: {
      description:'something' 
      }
   meal: {
      description: 'anotherSomething'
      }
}

const template = `<div>
   <ul>
     <li>
       %breakfast.description%
     </li>
     <li>
       %meal.description%
     </li>
   </ul>  
</div>
`

Instead of creating arrays and looping through keys, I am looking for a more elegant solution where I can dynamically access the object directly within the string like in a template literal. Any suggestions or solutions would be greatly appreciated!

javascript

Answer 1

Answer №1

Utilize a regular expression replacement with a callback function as the replacement, allowing it to retrieve the value from the object.

const menu = {
  breakfast: {
    description: 'something'
  },
  meal: {
    description: 'anotherSomething'
  }
}

const template = `<div>
   <ul>
     <li>
       %breakfast.description%
     </li>
     <li>
       %meal.description%
     </li>
   </ul>  
</div>
`

let result = template.replace(/%([^%]+)%/g, (g0, g1) => lookup(g1, menu));

console.log(result);

function lookup(path, obj) {
  return path.split('.').reduce((p, c) => p && p[c] || null, obj);
}

The lookup() method referenced in this code snippet was sourced from this answer.

Answer 2

Utilize a regular expression replacement with a callback function as the replacement, allowing it to retrieve the value from the object.

const menu = {
  breakfast: {
    description: 'something'
  },
  meal: {
    description: 'anotherSomething'
  }
}

const template = `<div>
   <ul>
     <li>
       %breakfast.description%
     </li>
     <li>
       %meal.description%
     </li>
   </ul>  
</div>
`

let result = template.replace(/%([^%]+)%/g, (g0, g1) => lookup(g1, menu));

console.log(result);

function lookup(path, obj) {
  return path.split('.').reduce((p, c) => p && p[c] || null, obj);
}

The lookup() method referenced in this code snippet was sourced from this answer.

Answer 3

Answer №2

After much exploration, I stumbled upon a clever workaround that involves replacing template variables with embedded template literals which are then evaluated as JavaScript code within the entire template string. One crucial step is to destructure the myMenuInformation object so that the eval function can access those values; otherwise, it may lead to errors or undefined outcomes. This insightful Stack Overflow post and the comprehensive MDN Web Docs on the Eval Function greatly aided me in this process:

Can ES6 template literals be substituted at runtime (or reused)?

MDN Web Docs Eval Function

function swapVariables(myTemplate, myMenuInformation){
   const matches = myTemplate.match(/(?<=\%)(.*?)(?=\%)/g);
    
        if (!matches) {
          return myTemplate;
        }
        const originalTexts = matches.map((m) => ({
          replacementRegex: new RegExp('\\%' + m + '%', 'g'),
          literalVar: '${'+m+'}',
        }));
        
        let newContent = myTemplate;
        originalTexts.forEach((match) => {
          newContent = newContent.replace(
            match.replacementRegex,
            match.literalVar,
          );
        });

        newContent = '`' + newContent + '`'
        var {breakfast, meal} = myMenuInformation
        return eval(newContent)
}

const updatedTemplate = swapVariables(template, menu)
console.log(updatedTemplate)

// OUTPUT:
//<div>
//   <ul>
//     <li>
//     something
//     </li>
//     <li>
//       anotherSomething
//     </li>
//   </ul>  
//</div>

Answer 4

After much exploration, I stumbled upon a clever workaround that involves replacing template variables with embedded template literals which are then evaluated as JavaScript code within the entire template string. One crucial step is to destructure the myMenuInformation object so that the eval function can access those values; otherwise, it may lead to errors or undefined outcomes. This insightful Stack Overflow post and the comprehensive MDN Web Docs on the Eval Function greatly aided me in this process:

Can ES6 template literals be substituted at runtime (or reused)?

MDN Web Docs Eval Function

function swapVariables(myTemplate, myMenuInformation){
   const matches = myTemplate.match(/(?<=\%)(.*?)(?=\%)/g);
    
        if (!matches) {
          return myTemplate;
        }
        const originalTexts = matches.map((m) => ({
          replacementRegex: new RegExp('\\%' + m + '%', 'g'),
          literalVar: '${'+m+'}',
        }));
        
        let newContent = myTemplate;
        originalTexts.forEach((match) => {
          newContent = newContent.replace(
            match.replacementRegex,
            match.literalVar,
          );
        });

        newContent = '`' + newContent + '`'
        var {breakfast, meal} = myMenuInformation
        return eval(newContent)
}

const updatedTemplate = swapVariables(template, menu)
console.log(updatedTemplate)

// OUTPUT:
//<div>
//   <ul>
//     <li>
//     something
//     </li>
//     <li>
//       anotherSomething
//     </li>
//   </ul>  
//</div>

What is the method to retrieve a javascript object from within a string template?

Answer №1

Answer №2

Similar questions

Tips for accessing the value of a dynamically created textbox using JavaScript

Updating the scope in Angular when changing the image source using ng-src is not working

Make a call to a URL in Symfony2 with JavaScript (AJAX)

In case of an API error with the Nuxt fetch method, ensure that the entire site responds with a 404

An error arises when using the command window.close()

ES6 does not allow the use of native setters when extending the HTMLButtonElement

clearInterval function is not functioning

unable to successfully npm install canvas

React Bootstrap ToggleButton firing function multiple times unnecessarily

Navigating to a new view in AngularJS following a successful authentication with Firebase

What is the best way to select a specific value from JSON (Webhook) Data?

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

Is Cognito redirect causing issues with Angular router responsiveness?

Ava tests hitting a snag with TypeScript ("Oops! Unexpected identifier found")

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

How can I implement Jquery ajax calls in various JavaScript functions?

Steps to indicate a selected check column in a grid

Import a new JavaScript file and access a variable

Tips for adding React components to an array with the help of backticks

Personalize the appearance of dynamically generated DIV elements