[SOLVED] Javascript dynamic string template to title

Javascript dynamic string template to title

I have a string template that backend sends dynamically. Each table tab has a different label_pattern when user want to edit or delete a row we should build the title based on this pattern.. At the moment we use the hash id in the title (pop-up, when want to edit or delete a table row) but it is not descriptive..

The string template look like this:

label_pattern: "{{code}}, {{description}}, {{category}}"

We can also have access through props to the row we want to delete or edit and the object looks like this:

{
  category: "Fruit"
  code: "AP"
  description: "Green Apple"
  hash: "b45516ddda8566ee"
}

I used the split function to create an array from the label pattern:

 ['{{code}},', '{{description}},', '{{category}},']

The reason why it is important because the label_pattern on a different table tab maybe looks differently. So we always have to compare the active table pattern because they adjusted to the current tab's row object. I can access the active tab pattern and the row's data too. I just don't know how to iterate, map and replace through the pattern array in order to build the title text based on this..

Solution

You can simply achieve it by using RegEx with the help of String.replaceAll() method.

Live Demo :

const label_pattern = "{{code}}, {{description}}, {{category}}";

const obj = {
  category: "Fruit",
  code: "AP",
  description: "Green Apple",
  hash: "b45516ddda8566ee"
};

const reg = /{{|}}/g

const splittedStr = label_pattern.replaceAll(reg, '').split(',');

function buildLabel(splittedStr, obj) {
  const label = splittedStr.map(item => obj[item.trim()]);
  return label.join(' ')
}

console.log(buildLabel(splittedStr, obj));