Passing parent object dynamically to function as argument in javascript

Question

This is my first question in the forum. I've searched a lot before asking you guys, but maybe because I'm still building my JavaScript skills, I couldn't figure it out.

I'm trying to pass a object as an argument dynamically, according to the URL like shown below.

 let createDataLayer = () => {

  //Creating objects with the values for each page
  someurl = {
    pageType: 'Content',
    institution: 'Institution',
    contentTopic: 'Membership',
    productCategory: '',
    productName: '',
  };

  //Attaching the right array to the actual url
  let actualURL = "/some-url/";
  actualURL = actualURL.replace(/-/g,"");
  actualURL = actualURL.replace(/\//g,"");

  //Function that applies the right content to the right page
  let applyingContent = (variable) => {
    console.log("Always come as string: ", typeof variable); //string
    console.log("Can't access the object: ", variable.pageType); //undefined
    console.log("If I call the variable itself, it's here: ", someurl); //the object logs ok
    window.dataLayerValues = [variable.pageType, variable.institution, variable.contentTopic, variable.productCategory, variable.productName];
    return window.dataLayerValues;
  }

  applyingContent(actualURL);

}
createDataLayer();

Can anyone help me, please?

I appreciate it so much!

Answer 1

Accessing variables via strings held in other variables is not something that is typically done in javascript. Your code generally shouldn't care what a variable is named. If you need to organize data so you can access it with a string key, you should be using an object with keys that correspond to the strings. That would look something like this:

const urls = {
    someurl: {
        pageType: 'Content',
        institution: 'Institution',
        contentTopic: 'Membership',
        productCategory: '',
        productName: '',
    }
}

You then access the data with urls[key] where key is your string.

Then you can use it with only a few changes to your code:

 let createDataLayer = () => { //Creating objects with the values for each page const urls = { someurl: { pageType: 'Content', institution: 'Institution', contentTopic: 'Membership', productCategory: '', productName: '', } } //Attaching the right array to the actual url let actualURL = "/some-url/"; actualURL = actualURL.replace(/-/g,""); actualURL = actualURL.replace(/\\//g,""); //Function that applies the right content to the right page let applyingContent = (variable) => { console.log("Strill a string: ", typeof variable); //string // object accessed with key: urls[variable] console.log("Can access the object: ", urls[variable].pageType); //undefined return urls[variable]; } applyingContent(actualURL); } createDataLayer(); 

This will keep all your data neatly packaged in one object rather than having individual variables all over the place. You can pass that object around, alter it, etc.

Answer 2

It seems you are assigning some-url as a string of value "/some-url/" into actualURL which is then passed to applyingContent(). You will need to pass somebody as an object to the applyingContent() function in order to use its internal values.

Answer 3

Thank you, Ele! You gave me the directions I needed! So I just asked google "Convert String in Variable Name JavaScript". The answer is I needed to use the eval() function to my string before passing it into the argument. Here is the easiest way to do what I need:

let createDataLayer = () => {

  //Creating objects with the values for each page
  someurl = {
    pageType: 'Content',
    institution: 'Institution',
    contentTopic: 'Membership',
    productCategory: '',
    productName: '',
  };

  //Attaching the right array to the actual url
  let actualURL = "/some-url/";
  actualURL = actualURL.replace(/-/g,"");
  actualURL = actualURL.replace(/\//g,"");

  actualURL = eval(actualURL);//This is the line I needed =)

  //Function that applies the right content to the right page
  let applyingContent = (variable) => {
    console.log("Always come as string: ", variable.pageType); //string
    console.log("Can't access the object: ", variable.pageType); //undefined
    console.log("If I call the variable itself, it's here: ", someurl); //the object logs ok
    window.dataLayerValues = [variable.pageType, variable.institution, variable.contentTopic, variable.productCategory, variable.productName];
    return window.dataLayerValues;
  }

  applyingContent(actualURL);

}
createDataLayer();

Thank you so much for pointing me in the right way, @Ele. Thank you all!