How to dynamically add HTML content to a JSON string with the help of Javascript

Question

How to dynamically add HTML content to a JSON string with the help of Javascript

I am working with a JSON object that includes various messages to be displayed on a webpage using Javascript. This JSON file is located in a separate directory and I have full control over it, being loaded asynchronously.

There are specific cases where different messages need to be shown, some of which contain dynamic data readily available within the function. To integrate this dynamic data into the string, I currently use plus signs for concatenation.

{
  "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 

  }
}

However, when I attempt to showcase the message on the page, the variable is parsed as a string instead of displaying its actual value. Even though the variable holds a value at that moment, on the webpage it just shows the text dyanamicData literally.

Your assistance on this matter would be greatly valued.

Thank you

javascript json

Answer 1

Answer №1

Insert a unique keyword into the message object, then employ the String.replaceAll() function to substitute it.

let message = {
  "text": {
    "promoMsg": '<p class="promotion">This is the promotional message. Placeholder is ##promotionalData##<\/p> '
  }
};


function showPromo(foo, promoData, message) {
  let updatedPromo = {
    ...message,
    text: { ...message.text,
      promoMsg: message.text.promoMsg.replace('##promotionalData##', promoData)
    }
  };
  if (foo) {
    console.log(updatedPromo);
  }
}

showPromo(true, 'new information', message);

If you require more flexibility, consider utilizing an object that links keywords with values and performing a regular expression substitution.

Answer 2

Insert a unique keyword into the message object, then employ the String.replaceAll() function to substitute it.

let message = {
  "text": {
    "promoMsg": '<p class="promotion">This is the promotional message. Placeholder is ##promotionalData##<\/p> '
  }
};


function showPromo(foo, promoData, message) {
  let updatedPromo = {
    ...message,
    text: { ...message.text,
      promoMsg: message.text.promoMsg.replace('##promotionalData##', promoData)
    }
  };
  if (foo) {
    console.log(updatedPromo);
  }
}

showPromo(true, 'new information', message);

If you require more flexibility, consider utilizing an object that links keywords with values and performing a regular expression substitution.

How to dynamically add HTML content to a JSON string with the help of Javascript

Answer №1

Similar questions

Tips for navigating the material ui Expanded attribute within the Expansion Panel

Node.js route leads to a 404 error page due to a simple configuration

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

Having issues with Thymeleaf template not functioning properly when using inline JavaScript

Understanding the mechanics of utilizing node modules and requiring them within an Express 4 router

Fill the table with information from a JSON file by selecting options from drop-down menus

hyperlink to choose a specific option from a drop-down menu

Ajax is unintentionally duplicating the request

Issues with loading JavaScript in Selenium

How to exit an ASP.NET application by pressing the exit button

Naming a JSON object twice

Vuejs Error: "No template or render function defined for a single file component"

What is the best way to use lodash to group objects that contain nested objects?

Struggling to get getInitialProps working in dynamic routes with Next.js?

Learn how to bring .Net DateTime and TimeSpan into Excel using Json and Power Query

Guide: Passing and reading command line arguments in React JavaScript using npm

Is there a way to store div content in a PHP Session?

"Trouble With JSON and ASP.NET WebMethod: Server-Side Method Not Executing

Is there a more efficient method to gather properties from an object into separate arrays without the need for using `map` twice?

Utilizing jQuery to generate dynamic nested divs within the ul li tags