jQuery extend overwrites object and creates duplicate
<p>I have two arrays where i want to extend array2 from array1 to get the 
"values".</p>

<p>But extend is overwriting another object too and thus creating a duplicate.</p>

<p><a href="https://plnkr.co/edit/uF6dEuGZ2Y8ADakjdKjs" rel="nofollow">enter link description here</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  var array1 = [{
attributeId: 2,
attributeName: "ToolOutput",
values: [
  "tool output value"
]
  }, {
attributeId: 4,
attributeName: "AggregationLevel",
values: [
  "aggregation level value"
]
  }];

  var array2 = [{
attributeId: 1,
attributeName: "DataToolsUsage",
values: []
  }, {
attributeId: 2,
attributeName: "ToolOutput",
values: []
  }, {
attributeId: 3,
attributeName: "ConnectedTo",
values: []
  }, {
attributeId: 4,
attributeName: "AggregationLevel",
values: []
  }];

  var newArray = $.extend({},array2, array1);

var printed = "result[0] is : &lt;br&gt; " + JSON.stringify(newArray[0]);
printed = printed + "&lt;br&gt;&lt;br&gt; result[1] is : &lt;br&gt; " + JSON.stringify(newArray[1])
printed = printed + "&lt;br&gt;&lt;br&gt; result[2] is : &lt;br&gt; " + JSON.stringify(newArray[2])
printed = printed + "&lt;br&gt;&lt;br&gt; result[3] is : &lt;br&gt; " + JSON.stringify(newArray[3])
  
document.write(printed);</code></pre>
</div>
</div>
</p>

<p>You can see in result two "AggregationLevel" objects. and also removal of "DataToolsUsage"</p>

<p>Any idea?</p>