Multilanguage Urlpath Change With Object Using Javascript
I would like to know how to change urlpath based on multiple languages. If the url is www.xyz.com/en/all-services-from-mal-to-sin/details?amount=1000&scy=SGD and if the lang is
Solution 1:
You might have to cast two objects into one such that values of one becomes key and value of another value as your base object is en
for case 2. Also I've change se
to seh
in hi
object as it was clashing with services
. Consider the following (first is the actual output, second is the desired output):
// for en will receive obj aslet en = {
"transfer-services": "transfer-services",
"about-info": "zhi-zhu",
"contact": "zhi-phi",
"all-services-from": "all-services-from",
"to": "to",
"sin": "sin",
"mal": "zmal"
};
// for zh will receive obj aslet zh = {
"transfer-services": "xi-hou-zhi-n",
"about-info": "zhi-zhu",
"contact": "zhi-phi",
"all-services-from": "hui-zhi-phi-tho",
"to": "zhi",
"sin": "stin",
"mal": "zmal"
};
// for hi will receive obj aslet hi = {
"transfer-services": "sabhee sevaen",
"about-info": "baare-mein",
"contact": "sampark-karen",
"all-services-from": "sabhee-sevak",
"to": "seh",
"sin": "sg",
"mal": "ml"
};
// will receive above obj base on curr_lang and prev_langfunctiontranslationUrl(langvalue) {
switch (langvalue) {
case'hi':
return hi;
case'zh':
return zh;
case'en':
return en;
}
}
functionswapObj(val) {
const lang = Object.keys(val).reduce((a, c) => ({ ...a,
[val[c]]: c
}), {});
return lang;
}
functioncastObj(prev, curr) {
const lang = Object.keys(currObj).reduce((a, c) => ({ ...a,
[currObj[c]]: prevObj[c]
}), {});
return lang;
}
functiontransformURL(url, curr_lang, prev_lang, prevObj, currObj) { // convert prev to curr langlet [base, lang, segment, ...rest] = url.split('/');
let obj = lang === prev_lang ? currObj : swapObj(currObj);
if (prev_lang !== 'en' && curr_lang !== 'en')
obj = swapObj(castObj(prevObj, currObj));
if (prev_lang !== 'en' && curr_lang === 'en')
obj = swapObj(prevObj);
Object.keys(obj).forEach(key => {
segment = segment.replace(key, obj[key]);
});
return [base, curr_lang, segment, ...rest].join('/');
}
let prev_lang = "en";
let curr_lang = "hi";
var prevObj = translationUrl(prev_lang);
var currObj = translationUrl(curr_lang);
console.log(transformURL('www.xyz.com/en/all-services-from-mal-to-sin?amount=1000&scy=SGD', curr_lang, prev_lang, prevObj, currObj));
console.log('www.xyz.com/hi/sabhee-sevak-ml-seh-sg?amount=1000&scy=SGD');
prev_lang = "hi";
curr_lang = "zh";
prevObj = translationUrl(prev_lang);
currObj = translationUrl(curr_lang);
console.log(transformURL('www.xyz.com/hi/sabhee-sevak-ml-seh-sg?amount=1000&scy=SGD', curr_lang, prev_lang, prevObj, currObj));
console.log('www.xyz.com/zh/hui-zhi-phi-tho-zmal-zhi-stin?amount=1000&scy=SGD');
prev_lang = "hi";
curr_lang = "en";
prevObj = translationUrl(prev_lang);
currObj = translationUrl(curr_lang);
console.log(transformURL('www.xyz.com/hi/sabhee-sevak-ml-seh-sg?amount=1000&scy=SGD', curr_lang, prev_lang, prevObj, currObj));
console.log('www.xyz.com/en/all-services-from-mal-to-sin?amount=1000&scy=SGD');
Solution 2:
You can solve this issue in this manner. simply return the new prev_lang.
You were not passing the element to function properly, while console.log It needs to pass in this manner:
console.log(transformURL('www.xyz.com/zh/all-services-from-mal-to-sin/details?amount=1000&scy=SGD',"zh", "hi",prevObj , currentObj) );
The second problem was you were returning the same lang of actual URL which needs to be changed. No need of swapObj()
// for en will receive obj asvar en = {
"transfer-services": "transfer-services",
"about-info": "about-info",
"contact": "contact",
"all-services-from": "all-services-from",
"to": "to",
"sin": "sin",
"mal": "zmal"
};
// for zh will receive obj asvar zh = {
"transfer-services": "xi-hou-zhi-n",
"about-info": "zhi-zhu",
"contact": "zhi-phi",
"all-services-from": "hui-zhi-phi-tho",
"to": "zhi",
"sin": "stin",
"mal": "zmal"
};
// for hi will receive obj asvar hi = {
"transfer-services": "sabhee sevaen",
"about-info": "baare-mein",
"contact": "sampark-karen",
"all-services-from": "sabhee-sevak",
"to": "se",
"sin": "sg",
"mal": "ml"
}
var prevObj = hi;
var currentObj = en;
Object.prototype.getKeyByValue = function (value) {
for (var prop inthis) {
if (this.hasOwnProperty(prop)) {
if (this[prop] === value)
return prop;
}
}
}
functionsearchReplace(segment, obj){
Object.keys(obj).forEach(key => {
segment = segment.replace(obj[key], obj.getKeyByValue(obj[key]));
});
segment = segment.replace("torvices","services");
return segment;
}
functiontransformURL(url, curr_lang, prev_lang, prevObj, currObj) { // convert prev to curr langlet [base, lang, segment, ...rest] = url.split('/');
lang = curr_lang
var obj = currObj;
segment = searchReplace(segment, obj);
var obj = prevObj;
segment = searchReplace(segment, obj);
return [base, prev_lang, segment, ...rest].join('/');
}
console.log(transformURL('www.xyz.com/hi/sabhee-sevak-ml-se-sg/details?amount=1000&scy=SGD', "hi", "en", prevObj, currentObj));
Post a Comment for "Multilanguage Urlpath Change With Object Using Javascript"