JavaScript--merge two array objects into one arr object then loop through each index/object

Question

var arrObj1 = [{a:1},{b:2}, {c:3}]

var arrObj2 = [{operator: LESS THAN}, {operator:GREATER THAN}, {operator:"NOT EQUAL"}]

so I want to merge obj at arrObj2[0] into obj at arrObj1[0], arrObj2[1] into obj at arrObj1[1] and so forth...

//resultArrObj = [{a:1, operator: LESS THAN}, {b:2, operator:"GREATER THAN}];

After (or while merging) i need to loop through each object and return a new obj which will have the properties(field, input, operator) and push into array.

field = key from arrObj1 (a, b, c)
input = value from arrObj1(1,2,3)
operator = "operator" from arrObj 2. 

// var endResult = [{field:a, input:1, operator: LESS THAN}, {field:b, input:2, operator:GREATER THAN}];

thanks!!

possible duplicate of [How can I merge properties of two JavaScript objects dynamically?](http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — Nick Louloudakis, Dec 18 '14 at 15:41

score 1 · Answer 1 · answered Dec 18 '14 at 15:59

Let's break this problem into 2 steps: 1) Merging objects 2) Processing objects

We can write a generalized merging function:

if (!Object.prototype.extend) {

      Object.prototype.extend = function (object) {

        for (key in object) {

          if (typeof object[key] === 'object' && 
              typeof this[key]   === 'object' && 
              this.hasOwnProperty(key)) {

            this[key].extend(object[key]);      

          } else {      
            this[key] = object[key];      
          }

        }    

        return this;  
      };
};

The code above creates a method that all Objects share. It works like this:

var obj1 = { 'a': 7 },
    obj2 = { 'b': 2 };

obj1.extend(obj2);

console.log(obj1); // { 'a': 7, 'b': 2 };

I usually wouldn't modify Objects like I have done with the .extend method, but it should be trivial to build something that does the same thing but has a different API. (for example, function extend (obj1, obj2) { do stuff.. and return extended object }

Anyways. That should solve the first part about merging objects.

The second part, processing this merged object, is simply using a for loop that iterates over the merged object, and pushes new objects into an array. It would look something like this:

for (var prop in mergedObject) {
  var tempObject = {};
  if (prop === 'operator') {
    tempObject.operator = mergedObject.operator;
  } else {
    tempObject.field = prop;
    tempObject.input = tempObject[prop];
  }
  endResult.push(tempObject);
}

Hopefully this helps you.

You _do_ realize that this extends every single object in JS right? — Benjamin Gruenbaum, Dec 18 '14 at 16:07
Ironically - this adds an enumerable property too which you'd later iterate and copy in your for... in loop — Benjamin Gruenbaum, Dec 18 '14 at 16:07
This will fail when `this[key]` is null, since `typeof null === 'object'`. — , Dec 18 '14 at 16:37
I do realize it extends every single object. I did mention right in the answer that I don't usually do this. I even mention that it would be easy to refactor it so that it is a function declaration, which would avoid the pitfall of using my initial suggestion that you said about iterating over that .extend property. Good point torazaburo, I did not think of that. Perhaps I should have put in the effort to provide the OP a better solution. My hope was that he could extract what he needed from what I provided to come up with his own solution. — Tony Nardi, Dec 18 '14 at 16:55

score 1 · Accepted Answer · answered Dec 18 '14 at 16:38

I believe this does what you are looking for. It assumes that you know your data and doesn't do any error checking but just combines them the way that you asked.

var arrObj1 = [{a:1},{b:2}, {c:3}];

var arrObj2 = [{operator: "LESS THAN"}, {operator:"GREATER THAN"}, {operator:"NOT EQUAL"}];

var endResult = [];
var counter = 0;
var objNew = {};

arrObj1.forEach(function(fieldInput){
    for ( field in fieldInput ){
        objNew.field=field;
        objNew.input=fieldInput[field];
        objNew.operator=arrObj2[counter]['operator'];
        counter++;
        endResult.push(objNew);
        objNew={};
    };
})

// var endResult = [{field:a, input:1, operator: LESS THAN}, {field:b, input:2, operator:GREATER THAN}, {field:c, input:3, operator:NOT EQUAL}]

JavaScript--merge two array objects into one arr object then loop through each index/object

2 Answers2