Why won't this global variable update in array?

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

Does this answer your question? [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — frodo2975, May 05 '20 at 14:22
You're trying to make a reference to a primitive value, which javascript doesn't support (although ES2015 added getters, which would work). — frodo2975, May 05 '20 at 14:23

Ashish Ranjan · Answer 1 · 2020-05-05T14:27:23.660

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

score 0 · Accepted Answer · answered May 05 '20 at 14:28

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

Why won't this global variable update in array?

2 Answers2