title: Compare two arrays of objects and if value for a certain key is missing, add an object with that value to the array - two ways
body: <p>I have one array that has objects whose keys match another array of objects with the same keys, and the value for the first key is a Month index (<code>0</code> = January, <code>1</code> = February, etc.) and the points may cross a year division (<code>a:10, a:11, a:0, a:1</code>)</p>
  
  <p>However the first array may not have the same number of objects, and the values for the key on one object may not exist in the other object on the same key, and vice-versa.</p>
  
  <p>Assuming both arrays are already ordered correctly, I want to compare those two arrays, and if one array is missing an object with a value for a key that the other one has, I want to add a new object to the first array with the same key and value, in the same position/index within the array that doesn't have it, as it is in the array that does have it.</p>
  
  <pre class="lang-js prettyprint-override"><code>let arr1 = [{a:0, b:1},{a:1, b:3},{a:3, b:18},{a:4, b:2}]
  let arr2 = [{a:10, b:2},{a:11, b:4},{a:0, b:8},{a:1, b:5},{a:2, b:1}]
  </code></pre>
  
  <p><code>arr1</code> is missing objects with an <code>a</code> value of 10, 11, and 2 that exist in <code>arr2</code>, and <code>arr2</code> is missing objects with an <code>a</code> value of 3 and 4 that exist in <code>arr1</code></p>
  
  <p><strong>What I want to end up with is</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>arr1 = [{a:10, b:0},{a:11, b:3},{a:0, b:1},{a:1, b:3},{a:2, b:0},{a:3, b:18},{a:4, b:2}]
  arr2 = [{a:10, b:2},{a:11, b:4},{a:0, b:8},{a:1, b:5},{a:2, b:1},{a:3, b:0},{a:4, b:0}]
  </code></pre>
  
  <p><strong>Now <code>arr1</code> has new items/objects for <code>a:10</code>, <code>a:11</code>, and <code>a:2</code> while
  <code>arr2</code> has new items for <code>a:3</code> and <code>a:4</code>, all of which have a <code>b</code> value of 0;</strong></p>
  
  <p>I've tried plotting this out on paper to see logically what I would do physically, but I just can't get my head around it, so a "For Dummies" answer would be really helpful. I thought I had learned enough to be employable, but this is really sticking me up, and it's just for a simple HTML5 canvas line graph. I'm getting data from a DB to compare two lines on the same graph, where there may not be data for one month for one type of data, but there is for the other type of data. And for those spots that don't exist in one or the other, I want to drop the line down to 0 on the Y axis, then back up to the next value. <a href="https://github.com/rmgreenstreet/custom-forms/blob/master/public/javascripts/canvasRender.js" rel="nofollow noreferrer">https://github.com/rmgreenstreet/custom-forms/blob/master/public/javascripts/canvasRender.js</a></p>