Home > front end >  Mix objects with objects and arrays to store individual settings and retrieve them
Mix objects with objects and arrays to store individual settings and retrieve them

Time:11-07

I want to store several general extension settings and specific website settings.

I need to save a website name if it's not yet saved and according to its number retrieve the individual settings.

Would the below setup be the best approach using an object with object for websites number & name (key/value) while for website settings array with objects that use the number of the arrays of the website?

And how can I do a check if a website is saved and then return its settings? Do i need to use indexof or findIndex?

const extensionsettings = {
   websites: {
      1: 'website 1',
      2: 'website 2',
      3: 'website 3'
        },
   websitesettings: [
     {
    1: {
      color: 'green',
      size: '12'
        },
    }, 
    {
    2: {
      color: 'red',
      size: '10'
        }
    }, 
    {
    3: {
      color: 'blue',
      size: '20'
        }
    }
  ],
    general: {
      optionalsetting1: 'yes',
      optionalsetting2: 'no'
        },
};

CodePudding user response:

There is no one 'best' approach but you can consider what the domain you are working in consists of, and then try to get your data structure to reflect that domain. This will make some operations much easier.

For example, you will only have a websiteSettings field for a given website if that site itself is already stored. As a result, you can keep the settings in the same object as the site address.

const extensionsettings = {
   websites: {
      'website 1': {
          color: 'green',
          size: '12'
      },
      'website 2': {
          color: 'red',
          size: '10'
      },
      'website 3': {
          color: 'blue',
          size: '20'
      }
   },
    general: {
      optionalsetting1: 'yes',
      optionalsetting2: 'no'
    },
};

// check whether site already has settings
// there are several ways to do this, but this is imo the most intuitive
const siteHasSettings = (settings, siteName) => {
    // get list of site names
    const keys = settings.websites.keys()
    return siteName in keys
}

// get settings for specific site
console.log(extensionsettings.websites[siteName])

CodePudding user response:

If you want to supply your own numeric keys as you current code does, then the array is an unnecessary extra layer.
You could omit it and do something like this to get website information, if it exists:

// Demonstates info retrieval
const settingsGlobal = getExtensionSettings();
logSiteInfo('website 3');
logSiteInfo('website 42');

function logSiteInfo(website){
  const siteInfo = getSiteInfo(website, settingsGlobal);
  console.log(`${website}:`);
  console.log(siteInfo ?? " ...not found");
}

// For each stored website: if value matches needle, uses key to get settings
function getSiteInfo(needle, haystack){
  const entries = Object.entries(haystack.websites); // entries are len-2 arrays
  for(const [key, value] of entries){ // Destructures each entry
    if(value === needle){
      return haystack.websiteSettings[key];
    }
  }
  return null; // Desired website value was not found
}

// Provides storage object
function getExtensionSettings(){
  const extensionSettings = {
     websites: { 1: 'website 1', 2: 'website 2', 3: 'website 3' },
     websiteSettings: {
        1: { color: 'green', size: '12' },
        2: { color: 'red', size: '10' },
        3: { color: 'blue', size: '20' }
      },
      general: { optionalsetting1: 'yes', optionalsetting2: 'no' }
  };
  return extensionSettings;
}

  • Related