How to merge and filter two arrays of objects in Javascript?
<p>I have the following:</p>

<pre><code>var owners = [{
  "ownerid": "11",
  "name": "jane",
  "sex": "female"
}, {
  "ownerid": "22",
  "name": "mike",
  "sex": "male"
}, {
  "ownerid": "33",
  "name": "alex",
  "sex": "male"
}];

var cars = [{
  "ownerid": "11",
  "make": "ford",
  "model": "mustang"
}, {
  "ownerid": "11",
  "make": "honda",
  "model": "civic"
}, {
  "ownerid": "33",
  "make": "toyota",
  "model": "corolla"
}];
</code></pre>

<p>And I would like to end up with this</p>

<pre><code>var mergedandfiltered = [{
  "name": "jane",
  "sex": "female",
  "make": "ford",
  "model": "mustang"
}, {
  "name": "jane",
  "sex": "female",
  "make": "honda",
  "model": "civic"
}, {
  "name": "alex",
  "sex": "male",
  "make": "toyota",
  "model": "corolla"
}];
</code></pre>

<p>The idea is to have a result merged and filtered so I have a list of owners, owner properties and the cars they own and car properties. Mike doesn't own any cars so doesn't show in the result. "ownerid" is the common link but I don't need it showing in the result.</p>

<p>Pure JS solution prefered please!</p>