Динамическая передача родительского объекта в качестве аргумента в JavaScript

Question

Это мой первый вопрос на форуме. Я много искал, прежде чем спрашивать вас, ребята, но, возможно, из-за того, что я все еще развиваю свои навыки JavaScript, я не мог понять это.

Я пытаюсь передать объект в качестве аргумента динамически, в соответствии с URL, как показано ниже.

 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();

Кто-нибудь может мне помочь, пожалуйста?

Я очень ценю это!

Answer 1

Доступ к переменным через строки, содержащиеся в других переменных, обычно не выполняется в javascript. Ваш код, как правило, не должен заботиться о том, как называется переменная. Если вам нужно организовать данные так, чтобы вы могли получить к ним доступ с помощью строкового ключа, вам следует использовать объект с ключами, которые соответствуют строкам. Это будет выглядеть примерно так:

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

Затем вы получаете доступ к данным с помощью urls[key], где key - ваша строка.

Тогда вы можете использовать его только с несколькими изменениями в вашем коде:

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();

Это позволит хранить все ваши данные аккуратно упакованными в одном объекте, а не иметь отдельные переменные повсюду. Вы можете передать этот объект, изменить его и т. Д.

Answer 2

Спасибо, Эле!Вы дали мне указания, которые мне нужны!Поэтому я просто спросил Google "Конвертировать строку в имя переменной JavaScript".Ответ в том, что мне нужно было использовать функцию eval () для моей строки перед передачей в аргумент.Вот самый простой способ сделать то, что мне нужно:

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();

Большое спасибо за то, что правильно указали мне, @Ele.Спасибо всем!

Answer 3

Кажется, вы назначаете some-url в виде строки значения "/ some-url /" в actualURL, который затем передается на applicationContent ().Вам нужно будет передать кого-то как объект в функцию applyContent (), чтобы использовать его внутренние значения.