Replace string with multiple array values

Question

I have two arrays where the first array is for the key, and the second array for the values.

var getKeys = Object.keys(data); // ['[name]', '[address]', '[gender]']
var getValues = Object.values(data); // ['Franky', 'Lemon Street', 'Male']

And I have a string like this:

'My name is [name]. I live at [address]. My gender is [gender].'

I want to replace the keys above with Array values like this:

'My name is Franky. I live at Lemon Street. My gender is Male.'

I have tried using map like this:

getKeys.map((key) => {
 getValues.map((value) => {
 const replaceValue = dataValue.replace(key, value);
 console.log(replaceValue)
 });
});

But only the last value is replaced. How can I replace for all keys?

• Lucifer Geralt: Your keys are inside an array of an array? I mean [ ["name"]] or ["name","anotherKey"]
• Muhammad Rafi Bahrur Rizki: It's a string, not an Array. I put like that for replace some important values @LuciferGeralt

Answer 1

There are logical issues in your code. You dont have to map though both arrays. Instead, loop through getKeys array, replace the keys from getKeys array with values from getValues array.

Why only last value is replaced?

You are declaring const replaceValue inside the map function. This will generate new memory for replaceValue whenever the loop executes. So each execution creates a new variable and only the last variable will be displayed in the output.

Working Fiddle

var getKeys = ['[name]', '[address]', '[gender]'];
var getValues = ['Franky', 'Lemon Street', 'Male'];
const myStr = 'My name is [name]. I live at [address]. My gender is [gender].';
let replaceValue = myStr;
getKeys.forEach((key, index) => {
 replaceValue = replaceValue.replace(key, getValues[index]);
});
console.log(replaceValue);

• Muhammad Rafi Bahrur Rizki: Thanks for sharing, I understand now. Thank you so much Nitheesh

Answer 2

You can use an extensible approach and try to avoid replace which can create confusion and buggy code for the large text. The simple approach will be to have an associative kind of array with the template literal. I believe you have a data object, you can simply modify the below snippet.

Below is one example.

var getKeys = ['name', 'address', 'gender'];
var getValues = ['Franky', 'Lemon Street', 'Male']
var obj = {};
for(var i = 0; i < getKeys.length; i++) {
 obj[getKeys[i]] = getValues[i];
}
var str = `My name is ${obj['name']}. I live at ${obj['address']}. My gender is 
${obj['gender']}.`;
console.log(str)