Merging objects from one array into another based on matching object values
<p>How can I use jQuery to merge the following two arrays on <code>child_array.cat_parent_id == parent_array.cat_id</code>?</p>

<p>The parent_array:</p>

<pre><code>[{
  "cat_name" : "Fruit",
  "cat_id" : 77
}, {
  "cat_name" : "Vegetables",
  "cat_id" : 221
}]
</code></pre>

<p>And the child_array which I'd like to have merged into parent_array:</p>

<pre><code>[{
  "cat_name" : "Bananas",
  "cat_id" : 79,
  "cat_parent_id" : 77
},{
  "cat_name" : "Apples",
  "cat_id" : 80,
  "cat_parent_id" : 77
}, {
  "cat_name" : "Carrots",
  "cat_id" : 222,
  "cat_parent_id" : 221
}]
</code></pre>

<p>Here's what I would like the output to look like:</p>

<pre><code>[{
  "cat_name" : "Fruit",
  "cat_id" : 77,
  "cat_children": [
     {
       "cat_name" : "Bananas",
       "cat_id" : 79
     },
     {
       "cat_name" : "Apples",
       "cat_id" : 80
     }
  ]
}, {
  "cat_name" : "Vegetables",
  "cat_id" : 221,
  "cat_children": [
     {
       "cat_name" : "Carrots",
       "cat_id" : 222
     }
  ]
}]
</code></pre>