What is the best way to substitute unpredictable dynamic variables on-the-fly?

Question

What is the best way to substitute unpredictable dynamic variables on-the-fly?

I am working with a .js file that contains a config structure similar to this:

genGetLocations:{
   data_url:'restaurants/{var1}/tables/{var2},
}

This is just one example. Some configurations may have data_url with more than two dynamic variables. In the .vue file, after obtaining the data_url, I will have two IDs that need to be inserted into var1 and var2 to form the final REST API URL for the request.

Challenge: It's uncertain how many variables each data_url will contain or where they will be placed within the data_url. Therefore, in the .vue files, when I get the IDs, I need to replace them in the data_url accordingly.

javascript vue.js vuejs2

Answer 1

Answer №1

Whether your IDs are structured within an array or object, there are different approaches to consider:

const data = 'restaurants/{var1}/tables/{var2}';
const idsArray = [101, 102];

console.log(
  data.replace(/\{var(\d+)\}/g, (substr, idx) => idsArray[parseInt(idx) - 1])
);

const data = 'restaurants/{var1}/tables/{var2}';
const idsObj = {
  var1: 101,
  var2: 102
};

console.log(
  data.replace(/\{(var\d+)\}/g, (substr, key) => idsObj[key])
);

If you prefer using arbitrary keys:

const data = 'restaurants/{foo}/tables/{bar}';
const idsObj = {
  foo: 101,
  bar: 102
};

console.log(
  data.replace(/\{(.*?)\}/g, (substr, key) => idsObj[key])
);

Answer 2

Whether your IDs are structured within an array or object, there are different approaches to consider:

const data = 'restaurants/{var1}/tables/{var2}';
const idsArray = [101, 102];

console.log(
  data.replace(/\{var(\d+)\}/g, (substr, idx) => idsArray[parseInt(idx) - 1])
);

const data = 'restaurants/{var1}/tables/{var2}';
const idsObj = {
  var1: 101,
  var2: 102
};

console.log(
  data.replace(/\{(var\d+)\}/g, (substr, key) => idsObj[key])
);

If you prefer using arbitrary keys:

const data = 'restaurants/{foo}/tables/{bar}';
const idsObj = {
  foo: 101,
  bar: 102
};

console.log(
  data.replace(/\{(.*?)\}/g, (substr, key) => idsObj[key])
);

Answer 3

Answer №2

Searching for every instance of {} in the URL provided is essential here. The placeholders can take various forms, such as {var1}, or {string2}.

To accomplish this task, consider the following code snippet:

var info = {"genGetLocations": {
   "data_url": "restaurants/{var1}/tables/{var2}"
}};

var ids = ["test1", "test2", "test3"];
var regexp = /\{.*?\}/g;
var results = info.genGetLocations.data_url.match(regexp);
var replacedString = info.genGetLocations.data_url;
results.forEach(function(result, index) {
  replacedString = replacedString.replace(new RegExp(result,"g"), ids[index]); 
});

console.log(replacedString);

Answer 4

Searching for every instance of {} in the URL provided is essential here. The placeholders can take various forms, such as {var1}, or {string2}.

To accomplish this task, consider the following code snippet:

var info = {"genGetLocations": {
   "data_url": "restaurants/{var1}/tables/{var2}"
}};

var ids = ["test1", "test2", "test3"];
var regexp = /\{.*?\}/g;
var results = info.genGetLocations.data_url.match(regexp);
var replacedString = info.genGetLocations.data_url;
results.forEach(function(result, index) {
  replacedString = replacedString.replace(new RegExp(result,"g"), ids[index]); 
});

console.log(replacedString);

Answer 5

Answer №3

Why not give this a try?

String.prototype.formatUnicorn = String.prototype.formatUnicorn || function () {
    var template = this.toString();
    if (!arguments.length)
        return template;
    var argumentType = typeof arguments[0],
    params = "string" == argumentType || "number" == argumentType ? Array.prototype.slice.call(arguments) : arguments[0];
    for (var key in params)
        template = template.replace(new RegExp("\\{" + key + "\\}", "gi"), params[key]);
    return template
}

/** Example Code 
genGetLocations:{
   data_url:'restaurants/{var1}/tables/{var2},
}**/
console.log('restaurants/{var1}/tables/{var2}'.formatUnicorn({'var1':'test1','var2':'test2'}))

Answer 6

Why not give this a try?

String.prototype.formatUnicorn = String.prototype.formatUnicorn || function () {
    var template = this.toString();
    if (!arguments.length)
        return template;
    var argumentType = typeof arguments[0],
    params = "string" == argumentType || "number" == argumentType ? Array.prototype.slice.call(arguments) : arguments[0];
    for (var key in params)
        template = template.replace(new RegExp("\\{" + key + "\\}", "gi"), params[key]);
    return template
}

/** Example Code 
genGetLocations:{
   data_url:'restaurants/{var1}/tables/{var2},
}**/
console.log('restaurants/{var1}/tables/{var2}'.formatUnicorn({'var1':'test1','var2':'test2'}))

What is the best way to substitute unpredictable dynamic variables on-the-fly?

Answer №1

Answer №2

Answer №3

Similar questions

Saving numerous files with Promises

a guide on creating a dynamic hierarchical menu using vue.js

Angular2 scripts are failing to load in the web browser

Tips for avoiding automatic updates to .js scripts after pressing F5

Discover which npm module includes the lodash dependency

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

Error: Trying to call an undefined function

The ternary operator is malfunctioning when it comes to the condition

Is it possible for AJAX to update a button's argument?

A glitch in showcasing the hello world example in Node.js with express

Sending a parameter to a different function (on a separate webpage)

Encountering 404 Error in Production with NextJS Dynamic Routes

CoffeeScript is failing to run the code

Retrieving all selected checkboxes in AngularJS

Guide to switching between 3 classes with mouseover using JavaScript

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

When trying to authorize my channel, the JSON data is coming back as a blank string

The dropdown on my website is malfunctioning

The Node.js JSON string displays as "[object Object]" in the output

Modify data in an array using Vuex