How to add properties dynamically to each object in an javascript array

Question

I am trying to loop through an array of objects to prepend a property and value to each object . The order of the tables is important because I am trying to use a handsontable view as a client to retrieve the contents of a server side mysql table. I want the handsontable view to have the same column order as the table , but I want to insert a checkbox column as the first column to allow record selection. I have a fiddle http://jsfiddle.net/kc11/juo1e4at/#base that does the loop, but I'm not sure how to prepend each object's property-value pair. array unshift appears to be for arrays. I'd like a result of an object to look go from:

Object { car="Audi A4 Avant", year=2011, available=true, more...}

to:

Object { checkbox=false, car="Audi A4 Avant", year=2011, available=true, more...}

How can I make this happen

Take the object and write anObject.checkbox = false? "Prepending" doesn't really make a lot of sense for named properties. — Dave Newton
– Dave Newton, Commented Jan 2, 2015 at 23:16
Kim, The order of the properties does matter because I want to prepend a handsontable checkbox column. — user1592380
– user1592380, Commented Jan 2, 2015 at 23:19

Etheryte · Accepted Answer · 2015-01-02 23:38:05Z

3

The order of properties in a Javascript object doesn't matter, they aren't strictly ordered.
Given

var cars = [
  {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
  {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
  {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
  {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
  {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
];

You can simply do the following if you don't have the property ready to send from the backend or want to do it in the frontend for other reasons (smaller payload size etc).

for (i in cars) {
  cars[i].checkbox = false;
}

Now, coming back to the issue of Handsontable column order (which is actually the main problem of the question), you can define it as follows:

var hot = new Handsontable(container,{
  data: cars,
  /* Other config */
  columns: [
    {data: "checkbox", type: 'checkbox'},
    {data: "car", type: 'text'}
    /*Other columns*/
  ]
});

See the manual for further info.

answered Jan 2, 2015 at 23:38

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

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

2 Comments

user1592380 Over a year ago

Nit, Is it fair to say that although the ajax transmitted javascript objects from the server side do not have an order to their properties property this is set solely by the columns property which takes an array (ordered) of objects in handsontable?

Etheryte Over a year ago

@user61629 Yes, that is correct. The order of the columns is defined by the columns configuration. If it isn't set there, the order may be arbitrary.

foxygen · Accepted Answer · 2015-01-03 00:41:12Z

Here is an example using the getCarData function in your fiddle. It allows you to prepend keys to an object by wrapping this functionality in a simple class (called PrependableObject).

PrependableObject = function(obj){

    this.obj = obj;

}

PrependableObject.prototype.prepend = function(key, val){

    var newObj  = new Object(),
        oldKeys = Object.keys(this.obj);

    newObj[key] = val;

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

        newObj[oldKeys[i]] = this.obj[oldKeys[i]];
    }

    return newObj;

}

function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
 }

var carData = getCarData();

carData.forEach(function(obj, index){

    var obj = new PrependableObject(obj),
        newObj = obj.prepend('check', false);

    carData[index] = newObj;
});

// To prove the keys are in the correct order
var car1 = carData[0];

Object.keys(car1).forEach(function(key, i){

    console.log(key + ' = ' + car1[key]);

});

Updated fiddle:

http://jsfiddle.net/juo1e4at/4/

Of course, the logic in your forEach loop could do anything (e.g. use the car model to determine which dynamic value to assign the object, the car year, etc).

Thank you, that does answer the question the only issue is order ( or lack thereof ) in an object. Please see my note above.

Collectives™ on Stack Overflow

How to add properties dynamically to each object in an javascript array

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related