Include a variable in JSON string containing HTML using Javascript [duplicate]

Question

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

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
– Phil, Commented Nov 3, 2022 at 23:50
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
– Phil, Commented Nov 3, 2022 at 23:54
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 — Phil
– Phil, Commented Nov 4, 2022 at 0:06
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
– Andy, Commented Nov 4, 2022 at 0:27

Barmar · Accepted Answer · 2022-11-04 00:09:25Z

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.

edited Nov 4, 2022 at 0:09

answered Nov 3, 2022 at 23:53

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ConsoleLog Over a year ago

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.

Collectives™ on Stack Overflow

Include a variable in JSON string containing HTML using Javascript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related