How to create an array of object literals in a loop?

Question

I need to create an array of object literals like this:

var myColumnDefs = [
    {key:"label", sortable:true, resizeable:true},
    {key:"notes", sortable:true,resizeable:true},......

In a loop like this:

for (var i = 0; i < oFullResponse.results.length; i++) {
    console.log(oFullResponse.results[i].label);
}

The value of key should be results[i].label in each element of the array.

score 434 · Accepted Answer · edited May 29 '21 at 04:27

434

var arr = [];
var len = oFullResponse.results.length;
for (var i = 0; i < len; i++) {
    arr.push({
        key: oFullResponse.results[i].label,
        sortable: true,
        resizeable: true
    });
}

edited May 29 '21 at 04:27

user229044

222,134
40
319
330

answered Aug 17 '09 at 20:09

RaYell

68,096
20
124
150

3

calculating length only once is probably a good idea, I choose to add a `var obj` to make the code clearer, of course you can skip it, you can write the whole script in one line if you wish :) – RaYell Aug 17 '09 at 20:16
8

@Triptych - Yes, but it's a property lookup that you execute with each iteration, which isn't free and can be avoided. Micro-optimization? Possibly. Also, it is a "live" value - if you modify the array in the loop, the length will change on successive iterations which could lead to infinity. Give this a watch http://www.youtube.com/watch?v=mHtdZgou0qU – Peter Bailey Aug 17 '09 at 20:32
2

Yeah, but you're not modifying the array each iteration. If you were, it would be ridiculous to compare against length anyway in most cases. – Kenan Banks Aug 22 '09 at 16:11
Why arr becomes an object? Does js can has array of objects like array, not like object? https://jsfiddle.net/91cgc4zu/ – fdrv Mar 16 '16 at 22:57
I like the pattern of getting length outside the loop. Even though it may not matter here, it's a good habit to get into for the cases (and other languages) where it does matter. – JR Lawhorne May 30 '16 at 16:11
@fdrv Not sure if you still need a reply to this, but where does `arr` “become” an object? It’s always an object to begin with. A JS Array can have any value inside. – Sebastian Simon Mar 09 '22 at 23:15

Kenan Banks · Answer 2 · 2013-11-25T22:17:30.223

62

RaYell's answer is good - it answers your question.

It seems to me though that you should really be creating an object keyed by labels with sub-objects as values:

var columns = {};
for (var i = 0; i < oFullResponse.results.length; i++) {
    var key = oFullResponse.results[i].label;
    columns[key] = {
        sortable: true,
        resizeable: true
    };
}

// Now you can access column info like this. 
columns['notes'].resizeable;

The above approach should be much faster and idiomatic than searching the entire object array for a key for each access.

edited Nov 25 '13 at 22:17

answered Aug 17 '09 at 20:16

Kenan Banks

198,060
33
151
170

+1 since the key solution, makes more sense and help me with my needs:) – winner_joiner Apr 06 '13 at 12:18
it looks like you are missing a semi-colon after you set the var key? – superUntitled Nov 24 '13 at 01:32
nice answer, been looking for how to access the information for a while, thank you – thatOneGuy Jul 17 '15 at 15:26
what if key need to be more than once ! ['notes'] can occur more than once then what can we do? – Milson Nov 05 '15 at 17:01
2

Milson - in that case, it's not really a "key" – Kenan Banks Nov 25 '15 at 14:46

tetra master · Answer 3 · 2018-12-23T09:13:39.910

32

You can do something like that in ES6.

new Array(10).fill().map((e,i) => {
   return {idx: i}
});

edited Dec 23 '18 at 09:13

answered Dec 22 '18 at 14:46

tetra master

467
7
13

score 19 · Answer 4 · answered Oct 14 '16 at 23:16

19

This is what Array#map are good at

var arr = oFullResponse.results.map(obj => ({
    key: obj.label,
    sortable: true,
    resizeable: true
}))

answered Oct 14 '16 at 23:16

Endless

29,359
11
97
120

score 4 · Answer 5 · edited Dec 03 '14 at 09:58

4

This will work:

 var myColumnDefs = new Object();
 for (var i = 0; i < oFullResponse.results.length; i++) {
     myColumnDefs[i] = ({key:oFullResponse.results[i].label, sortable:true, resizeable:true});
  }

edited Dec 03 '14 at 09:58

Andrey Korneyev

25,929
15
67
67

answered Dec 03 '14 at 09:39

Manjunath Raddi

383
5
13

score 4 · Answer 6 · edited Mar 23 '16 at 12:08

In the same idea of Nick Riggs but I create a constructor, and a push a new object in the array by using it. It avoid the repetition of the keys of the class:

var arr = [];
var columnDefs = function(key, sortable, resizeable){
    this.key = key; 
    this.sortable = sortable; 
    this.resizeable = resizeable;
    };

for (var i = 0; i < len; i++) {
    arr.push((new columnDefs(oFullResponse.results[i].label,true,true)));
}

score 3 · Answer 7 · answered Aug 17 '09 at 20:10

I'd create the array and then append the object literals to it.

var myColumnDefs = [];

for ( var i=0 ; i < oFullResponse.results.length; i++) {

    console.log(oFullResponse.results[i].label);
    myColumnDefs[myColumnDefs.length] = {key:oFullResponse.results[i].label, sortable:true, resizeable:true};
}

score 3 · Answer 8 · answered Aug 17 '09 at 20:12

3

var myColumnDefs = new Array();

for (var i = 0; i < oFullResponse.results.length; i++) {
    myColumnDefs.push({key:oFullResponse.results[i].label, sortable:true, resizeable:true});
}

answered Aug 17 '09 at 20:12

Nick Riggs

1,257
6
7

7

It's better to init an array using `[]` instead of `new Array()`. – RaYell Aug 17 '09 at 20:17
Interesting discussion [] vs. new Array() http://stackoverflow.com/questions/7375120/why-is-arr-faster-than-arr-new-array – Adrian P. Feb 27 '16 at 21:12

Pe Wu · Answer 9 · 2021-11-28T13:33:45.433

3

If you want to go even further than @tetra with ES6 you can use the Object spread syntax and do something like this:

const john = {
    firstName: "John",
    lastName: "Doe",
};

const people = new Array(10).fill().map((e, i) => {(...john, id: i});

edited Nov 28 '21 at 13:33

answered Jan 27 '19 at 22:10

Pe Wu

503
4
12

How to create an array of object literals in a loop?

9 Answers9

Linked

Related