How to handle and interpolate a dynamic template literal string's format

asifakhtar

How to handle and interpolate a dynamic template literal string's format with values that can sometimes contain all 6 variables(maximum) but can contain format with sometimes just 2 variables, sometimes with sometimes just 4 variables. Please note order for the variables can be different.

I get template literal string's format from database for cardLabel property to display. I have a deal object and the values will come from that object: deal={group: 'aaa', Desc: 'abcd' ....etc}

cardLabel’s dynamic template literal string's format examples:

cardLabel='{Group} {Desc} - {termMonth} Month - {termOdometer} KMs/Miles {DeductibleAmount} {DeductibleType}';

cardLabel='{Desc} - {termMonth} Month - {termOdometer} KMs/Miles';

cardLabel='{Desc} {Group} - {termMonth} Month';

cardLabel='{Group} {Desc} - {termMonth} Month {DeductibleAmount}';

JMRKER

Are all 6 (maximum) variables available for the template literal each time the display is to be constructed, even if not used each time?
Can you provide an example of the contents of these variables (brief list)?

asifakhtar

JMRKER

contents : deal={group: 'aaa', Desc: 'abcd' ....etc}

JMRKER

Giving a SWAG at the data to be displayed, here is something you can expand upon.

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Template Literals </title>
<!-- From: https://www.webdeveloper.com/d/392388-how-to-handle-and-interpolate-a-dynamic-template-literal-strings-format -->
<style>

</style>

</head><body>

<script>
// cardLabel’s dynamic template literal string's format examples:

const cardLabel1
 = (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
   `${Group}  ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}`;

const cardLabel2
 = (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
   `${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles`;

const cardLabel3
 = (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
   `${Desc} ${Group} - ${termMonth} Month`;

const cardLabel4
 = (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
   `${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}`;

console.log(cardLabel1('Group','Description','January','1000','DeductAmt','DeductType'));
console.log(cardLabel2('Group','Description','April','4000','DeductAmt','DeductType'));
console.log(cardLabel3('Group','Description','July','7000','DeductAmt','DeductType'));
console.log(cardLabel4('Group','Description','October','10000','DeductAmt','DeductType'));
console.log();


// Alternative constructs
const cardLabelA
 = (Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType) =>
   `${Group}  ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}`;

const cardLabelB
 = (Desc,termMonth,termOdometer) =>
   `${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles`;

const cardLabelC
 = (Group,Desc,termMonth) =>
   `${Desc} ${Group} - ${termMonth} Month`;

const cardLabelD
 = (Group,Desc,termMonth,DeductibleAmount) =>
   `${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}`;

console.log(cardLabelA('Group','Description','January','1000','DeductAmt','DeductType'));
console.log(cardLabelB('Description','April','4000'));
console.log(cardLabelC('Group','Description','July'));
console.log(cardLabelD('Group','Description','October','DeductAmt'));


</script>

</body></html>

NogDog

JMRKER Replaced your single back-ticks with [code]...[/code] tags. 😉

JMRKER

NogDog
Thanks.
I just clicked on the instructions with "</>" in the reply section and it seemed to work at the time.
Is there some rule about using "</>" versus "[ code] ... [ /code]" versus "``" as shown in the section?
Appreciate the fix.

NogDog

JMRKER The </> button in the editor just puts single "back-tick" characters around the text, which apparently is really only telling the site to make it mono-spaced text. So it's fine for inline text like this, but loses indenting and stuff in a code block. (Also, if that code block happens to have a back-tick in it, you're kind of screwed. 🙂 )

So, for a block of code, your best bet is to surround it with [code]...[/code] tags. Alternatively, you can also use the "markdown" syntax of triple back-ticks...

```

...just before and just after the code block.

Yes, I agree, it would be nice if the code button put in code block tags instead of inline tags, but... 🤷‍♂️

JMRKER

Second attempt with OP's pseudo-data.

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Template Literals </title>
<!-- From: https://www.webdeveloper.com/d/392388-how-to-handle-and-interpolate-a-dynamic-template-literal-strings-format -->
</head><body>

<pre id='demo'></pre>

<script>
console.clear();
/* Following is for testing purposes only */
var demo='demo';
function log() { // separate lines
  let s='';  for (const v of arguments) { s += v+' '; }
  document.getElementById(demo).innerHTML += s+'<br>';
} 
function logs() { // merged lines (single space)
  let s='';  for (const v of arguments) { s += v+' '; }
  document.getElementById(demo).innerHTML += s; // NO new line added
}
</script>

<script>
const deal = {
  Group: 'aaa',
  Desc: 'abcd',
  termMonth: 'January',
  termOdometer: '12345',
  DeductibleAmount: 25,
  DeductibleType: 'Medical'
} 

// cardLabel’s dynamic template literal string's format examples:

const cardLabel1 = ( deal ) => {
   ( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
   return `${Group}  ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}`;
}
const cardLabel2 = ( deal ) => {
   ( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
   return `${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles`;
}
const cardLabel3 = ( deal ) => {
   ( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
   return `${Desc} ${Group} - ${termMonth} Month`;
}
const cardLabel4 = ( deal ) => {
   ( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
   return `${Group} ${Desc} - ${termMonth} Month ${DeductibleAmount}`;
}

  log(cardLabel1(deal));
  log(cardLabel2(deal));
  log(cardLabel3(deal));
  log(cardLabel4(deal));

</script>

</body></html>

rpg2009

JMRKER const cardLabel1 = ( deal ) => {
( { Group,Desc,termMonth,termOdometer,DeductibleAmount,DeductibleType } = deal );
return ${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType};
}

One step further, possibly

const cardLabel1 = ({ Group, Desc, termMonth, termOdometer, DeductibleAmount, DeductibleType }) => (
  `${Group} ${Desc} - ${termMonth} Month - ${termOdometer} KMs/Miles ${DeductibleAmount} ${DeductibleType}`
)

JMRKER There are many ways to remove the epidermis from a feline

Skin a cat, in other words 🙂

JMRKER

NogDog Thanks, I'll keep those suggestions in mind (until I lose it or forget again) 🙂

asifakhtar

JMRKER Thanks for you help but I was looking for something like that:
const deal = {
Desc: "description",
termMonth: "April",
termOdometer: "120",
Group: "ABC",
DeductibleAmount: "123"
};

let cardLabel='{Desc} - {termMonth} Month - {termOdometer} KMs/Miles';

Object.keys(deal).forEach(key => {
cardLabel = cardLabel.replace("{" + key + "}", deal[key]);
});

output.innerText = cardLabel;

Sempervivum

asifakhtar That code works fine. Are there any issues or questions left?

JMRKER

asifakhtar There are many ways to remove the epidermis from a feline.
Whatever works to your satisfaction is the right answer for you.
Good Luck! 🙂