jQuery compare two arrays objects to have one final array objects

Question

Could anyone help on below scenario? I have two array objects to compare based on model and serial and need to come out with one result only. Please refer to below sample. Thanks.

ArrayObject1 = [{model:'M1', serial:'S1', file:'F1', other:null},
                {model:'M2', serial:'S2', file:'F2', other:null}];

ArrayObject2 = [{model:'M1', serial:'S1', file:null, other:'F3'},
                {model:'M3', serial:'S3', file:null, other:'F4'}];

ExpectedResult = [{model:'M1', serial:'S1', file:'F1', other:'F3'},
                 {model:'M2', serial:'S2', file:'F2', other:null},
                 {model:'M3', serial:'S3', file:null, other:'F4'}];

Possible duplicate of [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Mark, Oct 26 '17 at 01:36
What should happen if both input arrays have an object with the same `model` and `serial` but different, non-null `file` or `other`? (Incidentally, it wouldn't hurt to [edit] the question to show valid object literal syntax, i.e., use `:` rather than `=`.) — nnnnnn, Oct 26 '17 at 01:45
The input arrays will always like the sample. Each input array will have have one model and serial only, as model and serial will make that object unique. Thanks. — Donna, Oct 26 '17 at 01:49
Have you tried [lodash](https://lodash.com)? I recommend using it as it has functions called `union` and `unionBy` that you can use for your purpose. Here's the doc: https://lodash.com/docs/4.17.4#union — Surya Darma Putra, Oct 26 '17 at 03:14

score 0 · Answer 1 · answered Oct 26 '17 at 02:56

I don't think jquery offers an easy method to solve your problem. And this is my solution:

var arr1 = [
 { model: "M1", serial: "S1", file: "F1", other: null },
 { model: "M2", serial: "S2", file: "F2", other: null }
];

var arr2 = [
 { model: "M1", serial: "S1", file: null, other: "F3" },
 { model: "M3", serial: "S3", file: null, other: "F4" }
];

var arr3 = arr1.concat(arr2);
var result = [];

arr3.forEach(function(item1, index){
 var arr4 = result.filter(function(item2, index){
  return item1.model === item2.model;
 });
 if (arr4.length === 1) {
  for(var prop in item1){
   if (item1.hasOwnProperty(prop)) {
    arr4[0][prop] = (item1[prop] || arr4[0][prop]);
   }
  }
 }else{
  result.push(item1);
 }
});

console.log(result);

This only works for the situation when there are atmost 2 models with same model name to merge, because if there are three 'M1' and two of them have none-null 'file', then i don't know which to choose..

score 0 · Answer 2 · answered Oct 26 '17 at 03:07

var ExpectedResult = [];
//loop through either of the object array. Since they are of same length, it wouldn't matter which one you choose to loop though.
 for(var i = 0; i < ArrayObject2.length; i++) {
   //check to see if the array element(which are objects) have the same model property
   if(ArrayObject2[i].model === ArrayObject1[i].model){
     //if they are the same, starting switching the values of the file and other properties in either one of the array 
     //I choose ArrayObject2, it won't matter which one you decide to use

     //this chooses which is truthy between file property of ArrayObject2 at index i and file property of ArrayObject1 at index i and assigns it to the file property of ArrayObject2 at index i
     ArrayObject2[i].file = ArrayObject2[i].file || ArrayObject1[i].file;

      //this chooses which is truthy between other property of ArrayObject2 at index i and other property of ArrayObject1 at index i and assigns it to the other property of ArrayObject2 at index i
     ArrayObject2[i].other = ArrayObject2[i].other || ArrayObject1[i].other;

     //push the ArrayObject2 at position i into the ExpectedResult array
     ExpectedResult.push(ArrayObject2[i]);
   }
   //other wise; if the model property differs, just push the ArrayObject1 and ArrayObject2 at index i
   else {
     ExpectedResult.push(ArrayObject1[i]);
     ExpectedResult.push(ArrayObject2[i]);
   }
 }

 ExpectedResult;

jQuery compare two arrays objects to have one final array objects

2 Answers2