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

JavascriptArraysObject Literal

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

You can do something like that in ES6.

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

Solution 4 - Javascript

This is what Array#map are good at

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

Solution 5 - Javascript

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

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Solution 8 - Javascript

var myColumnDefs = new Array();

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

Solution 9 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncodecowboyView Question on Stackoverflow
Solution 1 - JavascriptRaYellView Answer on Stackoverflow
Solution 2 - JavascriptKenan BanksView Answer on Stackoverflow
Solution 3 - Javascripttetra masterView Answer on Stackoverflow
Solution 4 - JavascriptEndlessView Answer on Stackoverflow
Solution 5 - JavascriptManjunath RaddiView Answer on Stackoverflow
Solution 6 - JavascriptJPIyoView Answer on Stackoverflow
Solution 7 - JavascriptBenMView Answer on Stackoverflow
Solution 8 - JavascriptNick RiggsView Answer on Stackoverflow
Solution 9 - JavascriptPe WuView Answer on Stackoverflow