Create a JavaScript object containing placeholders and another JavaScript object that holds the substitutions to be used

Question

Create a JavaScript object containing placeholders and another JavaScript object that holds the substitutions to be used

I have a placeholder object named ${var_name}

{
  "name": "${title}",
  "description": "${description}",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [
    {
      "@type": "instance",
      "mode": [
        "study",
        "online"
      ],
      "offers": {
        "@type": "Offer",
        "price": "${price}"
      }
    }
  ]
}

And I also have a substitutions object

{
  "title": "aaa",
  "description": "bbb \n ccc",
  "price": 100,
  "history": "ddd"
}

Once the placeholders are replaced, the result should be:

{
  "name": "aaa",
  "description": "bbb \n cc",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [
    {
      "@type": "instance",
      "mode": [
        "study",
        "online"
      ],
      "offers": {
        "@type": "Offer",
        "price": 100
      }
    }
  ]
}

Here is the function with the following steps:

convert the object with placeholders to a string
then replace with the substitutions object
convert the string back to an object

The issue is: JSON.parse will fail with data that contains JSON escape characters like: ", \, /, \b, \f, \n, \r, \t

function replace(template, data) {
    let templateString = JSON.stringify(template);
    var placeholders = templateString.match(/\${([\w\.\:]+)}/g);

    placeholders.forEach(placeholder => {
        // convert ${var_name} to var_name, then assign to phText
        let phText = placeholder.substring(2,placeholder.length - 1);
        if(data[phText]) {
            templateString = templateString.replace(placeholder, data[phText]);
        }
    });

    return JSON.parse(templateString);
}

javascript json

Answer 1

Answer №1

Instead of relying on JSON parsing, this function scans an object recursively to search for a specific pattern and replace it with a new value:

function scanObjectAndReplace(newValues, obj, key=false){
    if(key && typeof(obj[key])==='string'){
        let str = obj[key];
        let i1=str.indexOf("${"); 
        let i2=str.indexOf("}");
        if(i1>=0 && i2>i1) {
            let keyname = str.substring(i1+2, i2);
            let substr = str.substring(i1, i2+1);
            if(!(keyname in newValues)) {console.log(`key ${keyname} not exist in new valuse.`);return}
            if(i1==0 && i2==str.length-1) // if value include only the placeholder then set a new value
                obj[key] = newValues[keyname];
            else
                obj[key] = str.replace(substr,values[keyname]); // otherwise treat it as string replacment
            console.log(`oldval=${str}, newval=${obj[key]}, type=${typeof(obj[key])}`)
        }
    } else {
        let objval = key ? obj[key] : obj;
        if (Object.keys(Object(objval)).length>0) {
            for (const k of Object.keys(objval)){
                console.log(k);
                scanObjectAndReplace(newValues,objval, k);
            }
        }
    }
}
scanObjectAndReplace(new_values, obj); // calling the function

While a shorter version using regexp is possible, this function is designed for easier debugging.

Answer 2

Instead of relying on JSON parsing, this function scans an object recursively to search for a specific pattern and replace it with a new value:

function scanObjectAndReplace(newValues, obj, key=false){
    if(key && typeof(obj[key])==='string'){
        let str = obj[key];
        let i1=str.indexOf("${"); 
        let i2=str.indexOf("}");
        if(i1>=0 && i2>i1) {
            let keyname = str.substring(i1+2, i2);
            let substr = str.substring(i1, i2+1);
            if(!(keyname in newValues)) {console.log(`key ${keyname} not exist in new valuse.`);return}
            if(i1==0 && i2==str.length-1) // if value include only the placeholder then set a new value
                obj[key] = newValues[keyname];
            else
                obj[key] = str.replace(substr,values[keyname]); // otherwise treat it as string replacment
            console.log(`oldval=${str}, newval=${obj[key]}, type=${typeof(obj[key])}`)
        }
    } else {
        let objval = key ? obj[key] : obj;
        if (Object.keys(Object(objval)).length>0) {
            for (const k of Object.keys(objval)){
                console.log(k);
                scanObjectAndReplace(newValues,objval, k);
            }
        }
    }
}
scanObjectAndReplace(new_values, obj); // calling the function

While a shorter version using regexp is possible, this function is designed for easier debugging.

Answer 3

Answer №2

It seems like your code is functioning correctly,

"description": "bbb \n ccc"

However, it should actually be like this:

"description": "bbb \\n ccc"

This is because you are dealing with a JSON string where control characters need to be escaped with a backslash \. Therefore, in order to display a backslash in the code, you need to write two backslashes.

function replace(template, data) {
  let templateString = JSON.stringify(template);
  var placeholders = templateString.match(/\${([\w\.\:]+)}/g);

  placeholders.forEach(placeholder => {
    // convert ${var_name} to var_name, then assign to phText
    let phText = placeholder.substring(2, placeholder.length - 1);
    if (data[phText]) {
      templateString = templateString.replace(placeholder, data[phText]);
    }
  });

  return JSON.parse(templateString);
}

let test=replace({
  "name": "${title}",
  "description": "${description}",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [{
    "@type": "instance",
    "mode": [
      "study",
      "online"
    ],
    "offers": {
      "@type": "Offer",
      "price": "${price}"
    }
  }]
}, {
  "title": "aaa",
  "description": "bbb \\n ccc",       // <-- here
  "price": 100,
  "history": "ddd"
});
console.log(test);
console.log(test.description);

It may look unusual when using console.log() for an object, but a linebreak inside is actually working as intended.

Although I understand the main issue, I prefer not to modify the input.

That's perfectly fine. Alternatively, you can escape the characters before the replacement. One way to achieve this is by using JSON.stringify(), which handles the escaping for JSON formatting. The drawback is that it surrounds the string with quotation marks, which will need to be removed manually.

function replace(template, data) {
  let templateString = JSON.stringify(template);
  var placeholders = templateString.match(/\${([\w\.\:]+)}/g);

  placeholders.forEach(placeholder => {
    // convert ${var_name} to var_name, then assign to phText
    let phText = placeholder.substring(2, placeholder.length - 1);
    let rpText = data[phText];
    if (rpText) {
      rpText = JSON.stringify(rpText);             // <-- here
      rpText = rpText.substr(1,rpText.length-2);   // <-- and here
      templateString = templateString.replace(placeholder, rpText);
    }
  });

  return JSON.parse(templateString);
}

let test=replace({
  "name": "${title}",
  "description": "${description}",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [{
    "@type": "instance",
    "mode": [
      "study",
      "online"
    ],
    "offers": {
      "@type": "Offer",
      "price": "${price}"
    }
  }]
}, {
  "title": "aaa",
  "description": "bbb \n ccc",       // <-- and not here
  "price": 100,
  "history": "ddd"
});
console.log(test);
console.log(test.description);

Answer 4

It seems like your code is functioning correctly,

"description": "bbb \n ccc"

However, it should actually be like this:

"description": "bbb \\n ccc"

This is because you are dealing with a JSON string where control characters need to be escaped with a backslash \. Therefore, in order to display a backslash in the code, you need to write two backslashes.

function replace(template, data) {
  let templateString = JSON.stringify(template);
  var placeholders = templateString.match(/\${([\w\.\:]+)}/g);

  placeholders.forEach(placeholder => {
    // convert ${var_name} to var_name, then assign to phText
    let phText = placeholder.substring(2, placeholder.length - 1);
    if (data[phText]) {
      templateString = templateString.replace(placeholder, data[phText]);
    }
  });

  return JSON.parse(templateString);
}

let test=replace({
  "name": "${title}",
  "description": "${description}",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [{
    "@type": "instance",
    "mode": [
      "study",
      "online"
    ],
    "offers": {
      "@type": "Offer",
      "price": "${price}"
    }
  }]
}, {
  "title": "aaa",
  "description": "bbb \\n ccc",       // <-- here
  "price": 100,
  "history": "ddd"
});
console.log(test);
console.log(test.description);

It may look unusual when using console.log() for an object, but a linebreak inside is actually working as intended.

Although I understand the main issue, I prefer not to modify the input.

That's perfectly fine. Alternatively, you can escape the characters before the replacement. One way to achieve this is by using JSON.stringify(), which handles the escaping for JSON formatting. The drawback is that it surrounds the string with quotation marks, which will need to be removed manually.

function replace(template, data) {
  let templateString = JSON.stringify(template);
  var placeholders = templateString.match(/\${([\w\.\:]+)}/g);

  placeholders.forEach(placeholder => {
    // convert ${var_name} to var_name, then assign to phText
    let phText = placeholder.substring(2, placeholder.length - 1);
    let rpText = data[phText];
    if (rpText) {
      rpText = JSON.stringify(rpText);             // <-- here
      rpText = rpText.substr(1,rpText.length-2);   // <-- and here
      templateString = templateString.replace(placeholder, rpText);
    }
  });

  return JSON.parse(templateString);
}

let test=replace({
  "name": "${title}",
  "description": "${description}",
  "provider": {
    "@type": "Organization"
  },
  "hasInstance": [{
    "@type": "instance",
    "mode": [
      "study",
      "online"
    ],
    "offers": {
      "@type": "Offer",
      "price": "${price}"
    }
  }]
}, {
  "title": "aaa",
  "description": "bbb \n ccc",       // <-- and not here
  "price": 100,
  "history": "ddd"
});
console.log(test);
console.log(test.description);

Create a JavaScript object containing placeholders and another JavaScript object that holds the substitutions to be used

Answer №1

Answer №2

Similar questions

What is the best way to pass data from a parent component to a child component and utilize it within a function in Next.js

The malfunctioning jQuery dropdown menu on hover that needs fixing

Managing cookie-related changes to CSS classes using jQuery can present challenges

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

What is the best way to display my to-do list items within a React component

Passing an array from JavaScript to PHP and then storing it as a .json file

Creating an Ajax Post request for API invocation

how can I include an AngularJS variable as a parameter in an onclick function?

What is the method utilized by Redux to store data?

Automated vertical alignment of rows within the Bootstrap table

Ways to ensure the axios call is completed before proceeding with the codeexecution

Create an array or map of JSON encoder types in Golang

Stop the flow of data in the RxJS stream depending on a specific value within the stream

Retrieve the most recent ajax request and cancel any other ones

The issue of JQuery selector failure within an AngularJS controller

Getting started with TinyMCE in Nuxt: A step-by-step guide

Acquire JSON information from PHP utilizing JavaScript

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

Response from a Clean jQuery Web Service

What is the purpose of the execute_script() function in Selenium?