-1

I have a JSON object containing few messages that I show on a webpage using Javascript.The JSON file is in a different directory and I have full control of it and loaded asynchronously.

There are few scenarios where I have to display different messages and some of them contain dynamic data, which are readily available inside the function. I need to include these dynamic data inside the string, which I have added using plus signs as below.

{
  "text": {
    "successMsg": "<p class=\"success\">This is the success message. Variable is \" + dynamicData + \"<\/p> "
  }
}


//Pseudocode

function displayMsg() {
  var dynamicData = 'some data'
  if (foo) {
    //code to display the JSON text 

  }
}

When I display the message on the page, the variable just parses as a string. The variable contains a value at this point but on the webpage it just displays the text dyanamicData as a string.

Any help is greatly appreciated.

Thanks

ConsoleLog
  • 501
  • 3
  • 12
  • JS doesn't have any notion of templatable strings (other than `eval` which you should not use). You'll just have to perform a regular old find / replace – Phil Nov 03 '22 at 23:50
  • Thanks Phil - so this way is a 'no go' then :) – ConsoleLog Nov 03 '22 at 23:52
  • It really depends on where the original JSON strings come from and what level of control you have over that process. There's not enough information or context here to begin formulating a robust answer – Phil Nov 03 '22 at 23:54
  • Thanks again @Phil. I have just edited the question. The JSON file is in a different directory and I have full control of it and loaded asynchronously. There are few scenarios where I have to display different messages and some of them contain dynamic data, which are readily available inside the function. – ConsoleLog Nov 04 '22 at 00:01
  • 1
    The code in your question should reflect how the JSON is loaded. I'd advise using better placeholders in your strings, eg `{{dynamicData}}`. Then you could easily replace them or even use a library like [Moustache](https://mustache.github.io/) – Phil Nov 04 '22 at 00:06
  • 1
    I might extend that further: rather than having an HTML string, use different properties to define the element and class: `{ el: 'p', class: 'success', text: 'your text' }`, and then build the HTML on the fly. – Andy Nov 04 '22 at 00:27

1 Answers1

1

Put a distinct keyword in the message object, and use the String.replace() method to replace it.

var message = {
  "text": {
    "successMsg": '<p class="success">This is the success message. Variable is ##dynamicData##<\/p> '
  }
};


function displayMsg(foo, dynamicData, message) {
  let updatedMsg = {
    ...message,
    text: { ...message.text,
      successMsg: message.text.successMsg.replace('##dynamicData##', dynamicData)
    }
  };
  if (foo) {
    console.log(updatedMsg);
  }
}

displayMsg(true, 'some data', message);

If you need something more dynamic, you can use an object that maps keywords to values, and a regular expression replacement.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thanks @Barmar. Yes, This will definitely work, but I was trying to keep all the message text side of things separately in the JSON file. – ConsoleLog Nov 04 '22 at 00:04