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?

I'd recommend creating three arrays, and storing the values there. Then you can do temp[i] = ... etc. — Firas Dib
– Firas Dib, Commented Oct 28, 2018 at 15:51

Mark · Accepted Answer · 2018-10-28 16:26:10Z

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.

answered Oct 28, 2018 at 16:26

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MattG Over a year ago

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 Over a year ago

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.

Ele · Accepted Answer · 2018-10-28 15:50:40Z

1

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]);
 }

answered Oct 28, 2018 at 15:50

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

front_end_dev · Accepted Answer · 2018-10-28 15:53:03Z

1

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']

answered Oct 28, 2018 at 15:53

front_end_dev

2,0661 gold badge13 silver badges15 bronze badges

Comments

Divarrek · Accepted Answer · 2018-10-28 15:56:22Z

0

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"]

edited Oct 28, 2018 at 15:56

answered Oct 28, 2018 at 15:54

Divarrek

3223 silver badges12 bronze badges

1 Comment

Meghan Over a year ago

template string is missing $

Collectives™ on Stack Overflow

Create dynamic variable names and values using for loop: JavaScript

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related