Can you help me with my JavaScript issue?
Intended output: { children: { Display: { children: { … value: 2 } } } }
Real output: { children: {}, Display: {}, … value: 2 }
<span style="color:#323232;">
</span><span style="color:#323232;">Code:
</span><span style="color:#323232;">
</span><span style="color:#323232;">// Load default settings
</span><span style="color:#323232;">let defaultSettings;
</span><span style="color:#323232;">
</span><span style="color:#323232;">load("/assets/json/default-settings.json", 'json', function(defset) {
</span><span style="color:#323232;"> defaultSettings = defset;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> // Create custom settings
</span><span style="color:#323232;"> if(!Object.keys(localStorage).includes('settings')) {
</span><span style="color:#323232;"> setLs('settings', JSON.stringify({}));
</span><span style="color:#323232;"> };
</span><span style="color:#323232;">
</span><span style="color:#323232;"> customiseSetting('Display/UI/Distance', 2)
</span><span style="color:#323232;">});
</span><span style="color:#323232;">
</span><span style="color:#323232;">function settingURL(url) {
</span><span style="color:#323232;"> return('children/' + url.split('/').join('/children/') + '/value');
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span><span style="color:#323232;">function customiseSetting(url, value) {
</span><span style="color:#323232;"> url = settingURL(url);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> // Split the string by '/' and use reduce to access the nested properties
</span><span style="color:#323232;"> const newSettings = url.split('/').reduce(function(accumulator, val, index, array) {
</span><span style="color:#323232;"> // If the object does not have the current component as a property, create an empty object for it
</span><span style="color:#323232;"> // If the current component is the last one, assign the value
</span><span style="color:#323232;"> if (index == array.length - 1) {
</span><span style="color:#323232;"> accumulator[val] = value;
</span><span style="color:#323232;"> } else if (!accumulator.hasOwnProperty(val)) {
</span><span style="color:#323232;"> accumulator[val] = {}; // update the accumulator object
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> log([accumulator, val, index, array])
</span><span style="color:#323232;"> // Return the updated object
</span><span style="color:#323232;"> return(accumulator);
</span><span style="color:#323232;"> }, JSON.parse(ls('settings')));
</span><span style="color:#323232;"> log(newSettings);
</span><span style="color:#323232;"> setLs('settings', JSON.stringify(newSettings));
</span><span style="color:#323232;">}
</span><span style="color:#323232;">
</span>
I’ve been trying unsuccessfully for several days to fix to what must be a simple error. I’ve looked over it myself, but I can’t find the cause of the bug. I asked Bing, which usually helps, but it was unhelpful. So I’m sorry to be bothering you, but if you could help me solve this problem, I would really appreciate it.
EDIT: I fixed my code by using a recursive function as follows:
<span style="color:#323232;">function customiseSetting(url, value) {
</span><span style="color:#323232;"> url = settingURL(url).split('/');
</span><span style="color:#323232;">
</span><span style="color:#323232;"> let newSettings;
</span><span style="color:#323232;">
</span><span style="color:#323232;"> function recursiveSet(object, list, index, setTo) {
</span><span style="color:#323232;"> // If the current component is the last one, assign the value
</span><span style="color:#323232;"> if(index == list.length - 1) {
</span><span style="color:#323232;"> object[list[index]] = setTo;
</span><span style="color:#323232;"> return(object);
</span><span style="color:#323232;"> } else {
</span><span style="color:#323232;"> // Check if it already contains the value
</span><span style="color:#323232;"> if(object.hasOwnProperty(list[index])) {
</span><span style="color:#323232;"> object[list[index]] = recursiveSet(object[list[index]], list, index + 1, setTo);
</span><span style="color:#323232;"> } else {
</span><span style="color:#323232;"> object[list[index]] = recursiveSet({}, list, index + 1, setTo);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> return(object);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> };
</span><span style="color:#323232;">
</span><span style="color:#323232;"> newSettings = recursiveSet(JSON.parse(ls('settings')), url, 0, value);
</span><span style="color:#323232;">
</span><span style="color:#323232;"> log(newSettings);
</span><span style="color:#323232;"> setLs('settings', JSON.stringify(newSettings));
</span><span style="color:#323232;">}
</span>
Add comment