title: merge json object with arrays
body: <p>Suppose I have two json objects and I need to merge them.</p>
  
  <pre><code>css: [{
          drag: "mode() == 'layout'",
          ui_draggable: "mode() == 'layout'"
  }]
  
  css: [{
          someclass : true
  }]
  </code></pre>
  
  <p>I want to end up with:</p>
  
  <pre><code>css: [{
          drag: "mode() == 'layout'",
          ui_draggable: "mode() == 'layout'",
          someclass : true
  }]
  </code></pre>
  
  <p>After some further trial I came up with this but I assume I have place a few bugs or useless lines of code in it.</p>
  
  <p>I came up with this code after a little playing around. My needs didn't need to recurse more than two levels so this is just fine. It could be much refined I am sure but it works great for binding knockout. Here is an example of how I used it to extend jquery unobtrusive <a href="https://gist.github.com/2773185" rel="nofollow">knockoutjs</a></p>
  
  <pre><code>    var settings = {
          text: 'SelectedCard().CardData.Title',
          visible: "mode() != 'edit' || !isMyCard()",
          css: [{ drag: "mode() == 'layout'" , selectedElement: "selectedCardElement() == '_titlePreview'"}]
      };
      var settings2 = 
          {
              css: [{ drag: "mode() == 'layout'"}]
      };
     var settings3 =  merge(settings, settings2);
  
  function merge(first, second) {
  
      for (var a1 in first) {
          // if second object is null we are finished.
          used.push(a1);
          if (second[a1] == null) {
              continue;
          } else {
  
              var ob2 = second[a1];
              if (typeof (first[a1]) != typeof (ob2)) {
              throw new Error("conflicting properties named:" + a1);
              }
  
              if ($.isArray(first[a1])) {
  
                  for (var i = 0; i &lt; ob2.length; i++) {
                      first[a1].push(ob2[i]);
                  }
  
              } else {
                  // matching property. 
                  return merge(first[a1], second[a1]);
              }
          }
      }
      for (var a2 in second) {
          if (used.indexOf(a2) &lt; 0) {
              first[a2] = second[a2];
          }
      }
      return first;
  }
  </code></pre>