Create dynamic variable names and values using for loop: JavaScript

Question

I have a list of values that I want to dynamically assign to another list of values:

var activeMachines = [41,44,46]
for(i = 0; i < activeMachines.length; i++){
 var temp + activeMachines[i] = document.getElementById("tempData"+activeMachines[i]);
 var humid + activeMachines[i] = document.getElementById("humidData"+activeMachines[i]);
 var time + activeMachines[i] = document.getElementById("timeData"+activeMachines[i]);
 }

What I am hoping to achieve is that this loop would create 6 new variables in total:

temp41 = document.getElementById("tempData41");
temp44 = document.getElementById("tempData44");
...

Above is not working. I have read some other posts suggesting using arrays, but I think I need to somehow dynamically create a dictionary, and I can't seem to get the syntax right to achieve this. any suggestions?

• Firas Dib: I'd recommend creating three arrays, and storing the values there. Then you can do temp[i] = ... etc.

Answer 1

Anytime you're struggling to dynamically define variable names it's an indication that you should step back and reconsider your data structures. It's almost always the wrong choice that leads to difficult, messy code.

In this case it looks like you have three things that have an id and a temp, humidity and time property. This is exactly what objects are for.

For example you might represent the data like:

let data = { machine_41: {temp: 40, humid: 10, time: 200},
 machine_44: {temp: 30, humid: 15, time: 500},
 } // etc

Now all your data is in one place and you can access it with simple properties:

 data.machine_41.temp 

To go from your array of numbers to this object is simple with reduce():

var activeMachines = [41,44,46]
let data = activeMachines.reduce((obj, machineID) => {
 // some fake data
 temp = 20 // or document.getElementById etc..
 humidity = 10
 time = 600
 obj['machine_'+machineID] = {temp, humidity, time}
 return obj
}, {})
console.log("machine_41 humidity:",data.machine_41.humidity)
console.log(data)

This might not be the exact data structure you need (maybe it's better as an array for example), but this approach will serve you better than trying to create a bunch of individual variables.

• MattG: Thanks so much Mark. Your solution is much cleaner than the approach I was taking. Can you possibly explain how I could have different temp, humidity, time, values for each machine_id? Your code gives all machines the same values. I'm new to JavaScript, and don't fully understand your code. Thanks again for taking the time to help!
• Mark: Hey @MattG, I assumed your temp, humidity and where coming from the dom, so in the reduce you could use temp = document.getElementById("tempData"+ machineID) Each time through the loop machineID would correspond to the numbers in your array.

Answer 2

You can use the window object for doing that, however, I recommend you to create your own object to store those "variables" as properties within that new key-value object.

var activeMachines = [41,44,46]
var obj = {};
for(i = 0; i < activeMachines.length; i++){
 obj['temp' + activeMachines[i]] = document.getElementById("tempData"+activeMachines[i]);
 obj['humid' + activeMachines[i]] = document.getElementById("humidData"+activeMachines[i]);
 obj['time' + activeMachines[i]] = document.getElementById("timeData"+activeMachines[i]);
 }

Answer 3

Try this

var activeMachines = [41,44,46];
var output = {};
for(i = 0; i < activeMachines.length; i++){
 output["temp" + activeMachines[i]] = document.getElementById("tempData"+activeMachines[i]);
 output["humid" + activeMachines[i]] = document.getElementById("humidData"+activeMachines[i]);
 output["time" + activeMachines[i]] = document.getElementById("timeData"+activeMachines[i]);
 }
console.log(output);

All your variables are define in this variable. Access like output['temp41']

Answer 4

You can use an object and create properties instead of variables.

var context = {};
for (i = 0; i < activeMachines.length; i++) {
 context[`temp${activeMachines[i]}`] = document.getElementById("tempData"+activeMachines[i]);
}

And the access those data with context.temp41 or context["temp41"]

• Meghan: template string is missing $