Merge JavaScript objects

Question

I've read another similiar question on SO but there wasn't a clear answer at that question.

I got some JavaScript objects that look like this:

var moveJSON = {
    'name'  : move[0].innerHTML,
    'info'  : move[1].innerHTML,
    'power'  : move[2].innerHTML,
    'accuracy' : move[3].innerHTML,
    'type'  : move[4].innerHTML,
    'category' : move[5].innerHTML,
    'pp_min' : move[6].innerHTML,
    'pp_max' : move[7].innerHTML
}

I need to merge them into one object, that will be send to PHP via AJAX. But first: what's the best way to merge them into a single object (array)?

Answer 1

This should work.

var array = []

array.push(yourObject);

this will put your object into an array, which should be used if you were putting of a collection of the same object into one.

to merge different values into one object:

function makeObject(){
     var obj = {};

 obj['info']  = somevalue;    //arguments [0] maybe
 obj['power']  = somevalue;    
 obj['accuracy']   = somevalue;
 obj['type']       = somevalue;
 obj['category']   = somevalue;
 obj['pp_min']     = somevalue;
 obj['pp_max']    = somevalue;

return obj;

}

Here is a link also describing passing arguments like array into a function in JavaScript which could be useful in creating the merged object.

http://www.cherny.com/webdev/60/javascript-function-arguments-default-values-passing-objects-and-overloading

Answer 2

If you have multiple JSON objects, you can create a containing JSON object:

var containerJSON = {};

And use that object as an array:

containerJSON[0] = moveJSON_1;
containerJSON[1] = moveJSON_2;

Then in PHP you can use json_decode() to get your data back.

Answer 3

"Merging" objects is different than putting objects into an array, which is an aggregation. Although it provides you with a single object to pass around, this aggregate is structurally different than a merged object. Aggregating adds a level of depth when accessing values in the new container, which is an array. This is different from merging which results in the same container, an object.

If you're using Dojo, than you can just do:

var mergedObject = dojo.mixin(object1, object2);

Otherwise, here's a simple way of merging two or more objects:

var merge = function() {
    var result = {},
        length = arguments.length,
        object = null,
        key    = null;

    if ( length < 2 ) {
        throw "Must merge two or more objects";
    }

    for ( var i=0; i<length; ++i ) {
        object = arguments[i];
        for ( var key in object ) {
            if ( !object.hasOwnProperty(key) ) { continue; }
            result[key] = object[key];
        }
    }
    return result;
};

var mergedObject = merge({a:1}, {b:2, c:3, d: {a: 1}}, {a: 2, c:[1,2,3]});
// mergedObject looks like {a:4, b:2, c:[1,2,3], d:{a:1}}

As you'll see, this is very different than an aggregation:

var aggregate = function() {
    if ( length < 2 ) {
        throw "Must aggregate two or more objects";
    }

    // The following can be simplified to 
    //   return Array.prototype.slice.call(arguments);
    // but is left in a more explicit manner to illustrate the difference

    var result = [],
        length = arguments.length;

    for ( var i=0; i<length; ++i ) {
        if ( arguments.hasOwnProperty(i) ) {
            result.push(arguments[i]);
        }
    }

    return result;
};

var aggregation = aggregate({a:1}, {b:2, c:3, d: {a: 1}}, {a: 4, c:[1,2,3]});
// aggregation looks like [{a:1}, {b:2, c:3, d: {a: 1}}, {a: 4, c:[1,2,3]}];

So the difference is that mergedObject looks like {a:4, b:2, c:[1,2,3], d:{a:1}}, where property d is accessed as mergedObject.d, as opposed to aggregation, which looks like [{a:1}, {b:2, c:3, d: {a: 1}}, {a: 4, c:[1,2,3]}] and where property d is accessed as aggregation[1].d.

It should also be noted that an explicit function for aggregation isn't necessary thanks to the literal array definition syntax available in JavaScript

var aggregation = aggregate({a:1}, {b:2, c:3, d: {a: 1}}, {a: 4, c:[1,2,3]});

is equivalent to

var aggregation = [{a:1}, {b:2, c:3, d: {a: 1}}, {a: 4, c:[1,2,3]}];

Answer 4

This is a simple mixin function that will not overwrite existing object properties

var mixin = function(addToJSON, someOtherJSON) {
  for(var key in someOtherJSON) {
     // don't overwrite 
     if(!moveJSON[key]) {
       moveJSON[key] = someOtherJSON[key]; 
     }
  }
};

var otherJSON = {'someOtherStuff': someOtherMoves[0].innerHTML};

mixin(moveJSON, otherJSON);

That should do what you need.