grouping objects with .push then output to string
<p>Very noobie question here but just can't wrap my dumb brain around this.</p>

<p>I have 2 arrays:</p>

<pre><code>var catUri = [
  { catUri : "//test.com//test1" },
  { catUri : "//test.com//test2" }
];

var catKey = [
  { catKey : "test1" },
  { catKey : "test2" }
];
</code></pre>

<p>I'm trying join the arrays, then get the string from each object to create html like so...</p>

<pre><code>&lt;h2&gt;Test&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="//test.com//test1" title="test1"&gt;test1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="//test.com//test2" title="test2"&gt;test2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I tried a merge like this:</p>

<pre><code>var merge = [];
merge.push(catUri, catKey);
</code></pre>

<p>Which returns:</p>

<pre><code>[[Object { catKey="Test1"}, Object { catKey="Test2"}], [Object { catUri="//test.com//test1"}, Object { catUri="//test.com//test2"}]]
</code></pre>

<p>Here's where I start to get lost(if I'm not already lost)... When I try to get a string from the push object, I keep getting an undefined object.</p>

<pre><code>$.each(merge, function(){
  var str = '&lt;li&gt;&lt;a href="' + this.catUri + '" title="' + this.catKey + '"&gt;' + this.catKey + '&lt;\/a&gt;&lt;\/li&gt;';
  console.log(str);
});
</code></pre>

<p>Which returns:</p>

<pre><code>&lt;li&gt;&lt;a href="undefined" title="undefined"&gt;undefined&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="undefined" title="undefined"&gt;undefined&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p>Looping through a plain object returns my expected result.</p>

<pre><code>$.each(catKey, function(){
  var str = '&lt;li&gt;' + this.catKey + '&lt;/li&gt;';
  console.log(str);
});

&lt;li&gt;test1&lt;/li&gt;
&lt;li&gt;test2&lt;/li&gt;
</code></pre>

<p>I'm probably not merging these objects correctly. Any help is very much appreciated. </p>
