how to add values to an array of objects dynamically in javascript?

Question

This is an array of objects,

var data = [
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12}
    ];

How can I add values to these dynamically? iItried the below code but no success:

var lab =["1","2","3", "4"];
var val = [42,55,51,22];
var data = new Array();
for(var i=0; i<4; i++){
   data[i].label = lab[i];
   data[i].value = val[i];    
}

yes i know, its only here mistakenly.. thanks for informing me — Mujtaba Haider
– Mujtaba Haider, Commented Oct 22, 2011 at 9:37

Felix Kling · Accepted Answer · 2011-10-22 08:50:58Z

63

You have to instantiate the object first. The simplest way is:

var lab =["1","2","3"];
var val = [42,55,51,22];
var data = [];
for(var i=0; i<4; i++)  {
    data.push({label: lab[i], value: val[i]});
}

Or an other, less concise way, but closer to your original code:

for(var i=0; i<4; i++)  {
   data[i] = {};              // creates a new object
   data[i].label = lab[i];
   data[i].value = val[i];    
}

array() will not create a new array (unless you defined that function). Either Array() or new Array() or just [].

I recommend to read the MDN JavaScript Guide.

answered Oct 22, 2011 at 8:50

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

its4zahoor · Accepted Answer · 2019-09-04 13:02:58Z

12

In Year 2019, we can use Javascript's ES6 Spread syntax to do it concisely and efficiently

data = [...data, {"label": 2, "value": 13}]

Examples

var data = [
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
    ];
    
data = [...data, {"label" : "2", "value" : 14}] 
console.log(data)

For your case (i know it was in 2011), we can do it with map() & forEach() like below

var lab = ["1","2","3","4"];
var val = [42,55,51,22];

//Using forEach()
var data = [];
val.forEach((v,i) => 
   data= [...data, {"label": lab[i], "value":v}]
)

//Using map()
var dataMap = val.map((v,i) => 
 ({"label": lab[i], "value":v})
)

console.log('data: ', data);
console.log('dataMap : ', dataMap);

edited Sep 4, 2019 at 13:02

answered Jul 1, 2019 at 21:28

its4zahoor

1,8211 gold badge17 silver badges23 bronze badges

3 Comments

quirimmo Over a year ago

If in map you just make assignments, use forEach instead

its4zahoor Over a year ago

I guess, i used map then because I didn't know the i can also be get in forEach.

its4zahoor Over a year ago

I edited to include both the ways, map() is concise.

Collectives™ on Stack Overflow

how to add values to an array of objects dynamically in javascript?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related