Dynamically insert variables into an array

Question

I'm making charts for my app and I've experienced problem with dynamic variables. The variable for one single line on the chart looks like:

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

It has to look like this:

[
 var trace1 = {
   x: [1, 2, 3, 4],
   y: [10, 15, 13, 17],
   type: 'scatter'
 }, 
 var trace1 = {
   x: [1, 2, 3, 4],
   y: [10, 15, 13, 17],
   type: 'scatter'
 }
]

But it has to be dynamic: I will ask server for the amount of lines. And the problem now is to make as many trace[i] variables as the server says. For example, if the response is 3, it has to make three variables:

trace1 = {}, trace2 = {}, trace3 = {}

And it has to be inside array:

[trace1 = {}, trace2 = {}, trace3 = {}]

My question is: it is even possible to do something like this? A loop which will make for example there 3 variables in an array?

This is my goal:

[trace1 = {}, trace2 = {}, trace3 = {}]

Do you need them to be named? If not, just inserting the objects into the array would work. Otherwise, you can use an Object instead, and generate the keys dynamically, and set the value as the array of objects — Honinbo Shusaku, Dec 20 '16 at 17:11
@Abdul They have to be named, because in the legend will appear the name of each data-line. — , Dec 20 '16 at 17:12
Arrays do not contain "variables". They contain "values". The values do not have names, unless you consider the indices (0, 1, 2...) a kind of name. — , Dec 20 '16 at 17:17
*it has to be inside array* Who said? Why? Who is consuming this? *look at the example how it has to look.* Your example is a malformed JS object. You can't create something like that in JS. — , Dec 20 '16 at 17:19
Your goal doesn't make much sense. Why don't you show us real examples of what the server returns and what your chart expects. What you've shown is not possible with JavaScript. — Heretic Monkey, Dec 20 '16 at 17:20
@MikeMcCaughan That's all what I wanted. It's not possible. Thank you. — , Dec 20 '16 at 17:22
@H.Doe What you've shown is not possible. What your charting component needs likely is possible, but you seem to be reticent on what exactly that is. — Heretic Monkey, Dec 20 '16 at 17:23
@MikeMcCaughan Yeah thats why I've thank you, because I was likely sure that its not possible and u just made me 100% sure that I have to bite that problem from another side. — , Dec 20 '16 at 17:25
Please don't edit your question to ask a different question that invalidates existing answers. If you have a different question to ask, ask a new question. I've rolled back your question to its previous form. You can always close/delete your own question if you feel it is necessary. — Heretic Monkey, Dec 20 '16 at 18:08
*bite that problem* You haven't told us **what** problem that is. Presumably you have a library which requires an input in some form. What form is that? To whom will you be passing this object that you are trying to create? — , Dec 20 '16 at 18:25

score 0 · Answer 1 · answered Dec 20 '16 at 17:14

You can use an object instead of an array, and then iterate through the keys, as you would an array:

traces = {};

for(var i = 1; i <= 10; i++) {
 var thisTrace = {
      x: [1, 2, 3, 4],
      y: [10, 15, 13, 17],
      type: 'scatter'
    };

  traces["trace" + i] = thisTrace;
}

console.log(traces); // all the traces
console.log(traces["trace1"]); // access the "trace1" object

for (var traceName in traces) {
    // traceName is the key
    // traces[traceName] is the trace object
}

score 0 · Answer 2 · answered Dec 20 '16 at 17:18

Not sure what you mean but it you want an object like you refer in the desired result and you've the variables already defined, you could do someting like :

var nbr_of_objects = 3;
var traces_result = {};

for(var i=1;i<=nbr_of_objects;i++){
  traces_result["trace"+i] = window["trace"+i];
}

Hope this help.

var trace1 = {x: [1],y: [10],type: 'scatter'};
var trace2 = {x: [1, 2],y: [10, 15],type: 'scatter'};
var trace3 = {x: [1, 2, 3],y: [10, 15, 1],type: 'scatter'};

var nbr_of_objects = 3;
var traces_result = {};

for(var i=1;i<=nbr_of_objects;i++){
  traces_result["trace"+i] = window["trace"+i];
}

console.log(traces_result);

Gabriel Marques · Answer 3 · 2016-12-20T19:50:49.987

0

Not appropriate solution

Since you can store it in an object, you can set the name as array key

var traces = {};
for(var i=0; i<10; i++){
  traces["trace"+(i+1)] = {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter'
  }
}

then you could access the variable with the array's index like traces["trace1"] or traces.trace1 or to iterate over it like this:

for(var key in traces){
  console.log(traces[key])
}

Appropriate solution

var traces = [];
for(var i=0; i<10; i++){
  traces.push({
    name:"trace"+(i+1),
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter'
  });
}

You should iterate over the array looking for the matching trace name property instead of using its names as the array's key and use a for in like:

for(var i=0; i < traces.length; i++){
  console.log(traces[i].name);
}

edited Dec 20 '16 at 19:50

answered Dec 20 '16 at 17:33

Gabriel Marques

276
1
3
15

1

He needs them to be named – Honinbo Shusaku Dec 20 '16 at 17:56
Got it now, Thanks – Gabriel Marques Dec 20 '16 at 18:32
for loop over an object is an anti-pattern use for in and check if it is property http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object – Michail Michailidis Dec 20 '16 at 19:13
The user asked for a solution with dynamic variables inside a array... of course it will be a anti pattern. – shadow00 Dec 20 '16 at 19:56
1

The other possible solution would be a `eval()`, unsafe, or `window['var'+num]`, not so good but safer than eval(), in conjunction with a `array.push()`. – shadow00 Dec 20 '16 at 19:58

Dynamically insert variables into an array

3 Answers3