为什么这个全局变量不会在数组中更新？

Question

I'm making a small webapp in Javascript. I got every thing working except for 1 probably simple thing. I have 2 global variables that have to stay global, because I have to use them later in other functions:

var staffmembername;

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

};

The 'data' array uses the 'stafmembername' variable. The 'stafmembername' variable change its value to a selected option value. As you can see thanks to the test with alert. How ever the variable within the array seems to stay undefined.

Rest of code:

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;

} 

If I put the variables within the function it al works, but then my other functions won't work. So is there a way to update the variable within the array while keeping both variables global?

JSFIDDLE

Answer 1

This happens because your data object is already created and the name property inside it is not updated again. You can make the data Object by calling a method, this will take the latest values.

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

See this Fiddle

---

Another alternative could be to make the staffmembername as an Object and update its values, this way, you would be able to access updated object.

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;


}

See this Fiddle

Answer 2

staffmembername is evaluated when you initialize data , because it's passed by value. So its value in data never changes. You could wrap data in a function. staffmembername would be evaluated every time you call the function, not only at initialization:

var staffmembername;

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

Then use it like this:

data().personaldata[0].location

You could also use an object for staffmembername .

var staffmembernameObject = {};

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

And use it like this: data.personaldata[0].name.data