Почему эта глобальная переменная не обновляется в массиве?

Question

Я делаю небольшое веб-приложение на Javascript. У меня все заработало, кроме одной, наверное, простой вещи. У меня есть 2 глобальные переменные, которые должны оставаться глобальными, потому что я должен использовать их позже в других функциях:

var staffmembername;

var data = {
  "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
  ]

};

В массиве data используется переменная stafmembername. Переменная stafmembername изменяет свое значение на значение выбранного параметра. Как видите благодаря тесту с предупреждением. Однако переменная в массиве, кажется, остается неопределенной.

Остальной код:

document.getElementById("confirmchoice").onclick = function() {

  var e = document.getElementById("staffmember");
  pickedname = e.options[e.selectedIndex].text;
  document.getElementById("nr1").value = pickedname;
  staffmembername = document.getElementById("nr1").value;
  alert(staffmembername);

  document.getElementById("h3tl").innerHTML = "name:" + data.personaldata[0].name + "<br>"
  + "location: " + data.personaldata[0].location;

} 

Если я помещаю переменные в функцию, она все работает, но тогда другие мои функции не будут работать. Итак, есть ли способ обновить переменную в массиве, сохранив обе переменные глобальными?

JSFIDDLE

Answer 1

staffmembername оценивается при инициализации data, потому что он передается по значению. Поэтому его значение в data никогда не меняется. Вы можете заключить data в функцию. staffmembername будет оцениваться каждый раз, когда вы вызываете функцию, а не только при инициализации:

var staffmembername;

var data = function () {
   return {
    "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
   ]
  };
 }
};

Затем используйте его так:

data().personaldata[0].location

Вы могли бы также используйте объект для staffmembername.

var staffmembernameObject = {};

var data = [{
  personaldata: [{
    name: staffmembernameObject,
...
staffmembernameObject.data = document.getElementById("nr1").value;

И используйте его так: data.personaldata [0] .name.data

Answer 2

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

function getData() {
    return {
        "personaldata": [{
            "name": staffmembername,
            "location": "Iowa"
            },
            {
            "name": "Cynthia",
            "location": "California",
            }
        ]
    };
}

См. Это Fiddle

---

Другой альтернативой может быть сделайте staffmembername как объект и обновите его значения, таким образом, вы сможете получить доступ к обновленному объекту.

var staffmembername = {value: ''};

var data = {
  "personaldata": [{
      "name": staffmembername,
      "location": "Iowa"
    },
    {
      "name": "Cynthia",
      "location": "California",
    }
  ]

};

document.getElementById("confirmchoice").onclick = function() {
  var e = document.getElementById("staffmember");
  pickedname = e.options[e.selectedIndex].text;
  document.getElementById("nr1").value = pickedname;
  staffmembername.value = document.getElementById("nr1").value;
  alert(staffmembername);
  document.getElementById("h3tl").innerHTML = "name:" + data.personaldata[0].name.value + "<br>" + "location: " + data.personaldata[0].location;


}

См. это Fiddle