Javascript dynamic string template to title

Question

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..

Answer 1

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));