title: Add nested object data to a form
body: <p>I am adding data to a form from objects that can be multi layered.</p>
  
  <p><strong>Form Example</strong></p>
  
  <pre><code>&lt;form id="myForm"&gt;
      &lt;input name="foo" /&gt;
      &lt;input name="bar" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Data Example</strong></p>
  
  <pre><code>var myData = {
      level1: {
          foo: 'hello',
          level2: {
              bar: 'greetings'
          }
      }
  }
  </code></pre>
  
  <p><strong>Add data to form</strong></p>
  
  <pre><code>$.each(data, function (i, e) {
      var field = $('[name="' + i + '"]');
      if (field.is('input')) field.val(e);
  });
  </code></pre>
  
  <p>Now obviously this won't work, so I have two options.</p>
  
  <p>A) Flatten the object</p>
  
  <pre><code>var myResult = {
    level1 : '',
    foo : 'hello',
    level2 : '',
    bar : 'greetings'
  }
  </code></pre>
  
  <p>B) Recursively go through the object </p>
  
  <p>But I think to even do A, I need to do B anyway. So  B is the faster choice. Now, how do I recursively go through an object? I have been working on this fiddle and tried to implement a recursive for loop, but that loop does not extract the value from the object property. I am pretty spoiled by using jq $.each, but I don't know if it will work in this case.</p>
  
  <p><a href="http://jsfiddle.net/6d7L9qpw/1/" rel="nofollow">http://jsfiddle.net/6d7L9qpw/1/</a></p>