CODEWITHSUNDEEP
javascripthtmlangulartypescriptdynamic-data
MenimE
MenimE

Reputation: 304

Angular Changing/Replacing the value in a string based on the User selection

I am working on an offer letter template that will replace/modify Dynamic Data Points like Name, Address, Role, Salary, etc based on the candidate selected from a list of candidates. There is a fixed syntax for a dynamic data points i.e they will be enclosed within <<>>, for example :

Welcome to the family, <<Name>> 
You will be paid <<Salary>> for the duration of your employment.

In other words, these few data points will change by selecting the candidate we want to offer the job and the rest of the template will remain the same. Here is a demo to help you understand.

This is a dummy array I have created with 1 template, In the real-world app, I can have many templates with different clauseNames, so I am looking for a permanent fix. .ts file, Template List : 

[{

    templateId: 1,
    templateName: "Offer",
    clauses: [
      {
        clauseName: "Introduction",
        clauseId: 1,
        texts: [
          {
            text: "Hello <<Name>>, Welcome to the Machine",
            textId: 1,
          }]
      },
      {
        clauseName: "Address",
        clauseId: 2,
        texts: [
          {
            text: "<<Address>>",
            textId: 2,
          }]
      },
      {
        clauseName: "Date Of Joining",
        clauseId: 3,
        texts: [
          {
            text: "You can join us on <<DateOfJoining>>",
            textId: 3,
          }]
      },
    ]
  }]

and here is the candidate list, 

  candidateList = [
    { name: "Simba", address: "Some Random Cave" },
    { name: "Doe John", address: "line 4, binary avenue, Mobo" },
    { name: "B Rabbit", address: "8 mile road, Detroit" },
    { name: "Peter Griffin", address: "Spooner Street" },
    { name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
    { name: "Morty", address: "Time Machine XYZ" },
    { name: "Brock", address: "pokeball 420, Medic center" },
  ]

Upvotes: 1

Views: 993

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17504

Take a look at this demo

I have modified the logic in below method:

  showTeplate(name,address,doj) {
    this.clauseList = [];
    for (let a of this.templateList) {
      if (a.clauses != null) {
        for (let cl of a.clauses) {
          const tempObj = JSON.parse(JSON.stringify(cl));
          tempObj.texts.forEach(textObj => {
            textObj.text = textObj.text.replace("<<Name>>",name);
            textObj.text = textObj.text.replace("<<Address>>",address);
            textObj.text = textObj.text.replace("<<DateOfJoining>>",doj);
          })
          this.clauseList.push(tempObj)

        }
      }
    }
    console.log("Clause list", this.clauseList)
  }

Upvotes: 1

Arman
Arman

Reputation: 1442

You can use regular expressions to replace those placeholders such as:

var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
       return candidate[token.toLowerCase()];
    });

One way to incorporate this to your display is by creating a property that returns the formatted text.

I have updated your stackblitz here.

Upvotes: 2

Related Questions