title: Compare two arrays and update with the new values by keeping the existing objects using javascript
body: <p>Below are my two arrays .I want to compare them and the resultant array should contain the updated values.Id's are common..
  The arrays spans to n levels ie., there is no fixed levels..</p>
  
  <p>The first array ie., the array before updation..</p>
  
  <pre><code>var parentArray1=[
      {
          "id": 1,
          "name": "test",
          "context": [
              {
                  "id": 1.1,
                  "name": "test 1.1"
              }
          ]
      },
      {
          "id": 2,
          "name": "test"
      },
      {
          "id": 3,
          "name": "test",
          "context": [
              {
                  "id": 3.1,
                  "name": "test 3.1"
              }
          ]
      },
      {
          "id": 4,
          "name": "test"
      }
  ]
  </code></pre>
  
  <p>The operations that i performed are </p>
  
  <p>1.Adding a new Item
  2.Updating an existing item</p>
  
  <p>As a result of these two operations the changed values I will be getting in a different array..
  ie.,</p>
  
  <pre><code>var changedArray=
  
         [
          {
              "id": 1,
              "name": "test1",
              "context": [
                  {
                      "id": 1.1,
                      "name": "Changed test 1.1"
                  }
              ]
          },
          {
              "id": 5,
              "name": "test5"
          }
      ]
  </code></pre>
  
  <p>Now I have written a generic function that loops through the parentArray1 and using the unique propertiesI need to either add a new item,if the item is there in the <strong>changedArray</strong> or update an existing item at any level</p>
  
  <p>The resultant array should be ..</p>
  
  <pre><code>[
      {
          "id": 1,
          "name": "test",
          "context": [
              {
                  "id": 1.1,
                  "name": "Changed test 1.1"
              }
          ]
      },
      {
          "id": 2,
          "name": "test"
      },
      {
          "id": 3,
          "name": "test",
          "context": [
              {
                  "id": 3.1,
                  "name": "test 3.1"
              }
          ]
      },
      {
          "id": 4,
          "name": "test"
      },
      {
          "id": 5,
          "name": "test5"
      }
  ]
  </code></pre>
  
  <p>Generic function:</p>
  
  <pre><code>compareArray(parentArray1, changedArray, ["id"]);
  
          function compareArray(array1, array2, propertyArray) {
              var newItem = new Array();
              array2.map(function(a1Item) {
                  array1.map(function(a2Item) {
                      / If array loop again /
                      if (a2Item.constructor === Array) {
                          compareArray(a2Item, a1Item)
                      } else {
                          / loop the property name to validate /
                          propertyArray.map(function(property) {
                              if (a2Item[property]) {
                                  if (a2Item[property] === a1Item[property]) {
                                      a2Item = a1Item
                                  } else {
                                      var isAvailable = _.find(newItem, function(item) {
                                          return item[property] === a1Item[property]
                                      })
                                      if (!isAvailable) {
                                          newItem.push(a1Item);
                                      }
                                  }
                              }
                          })
                      }
  
                  });
              });
  
              / Insert the new item into the source array /
              newItem.map(function(item) {
                  array1.push(item);
              });
              console.log("After Compare : " + array1);
          }
  </code></pre>