title: How to unnest deeply nested objects recursively?
body: <p>I am working with an array that could have a number of objects/arrays of <em>unpredictable</em> nesting. Each of the objects will always have a <code>name</code> property, and some of these objects may have an array of <code>sub_fields</code>. I wish to strip down the object so that each object's key equals the <code>name</code> property, while maintaining the levels of nesting from the original. </p>
  
  <p>Here's an example of what I could be starting off with:</p>
  
  <pre><code>var data = [
      {
          foo: 'foo',
          bar: 'bar',
          name: 'Object 1'
      },
      {
          foo: 'foo',
          bar: 'bar',
          name: 'Object 2'
      },
      {
          foo: 'foo',
          bar: 'bar',
          name: 'Object 3',
          sub_fields : [
              {
                  foo: 'foo',
                  bar: 'bar',
                  name: 'SubLevel Object 1',
                  sub_fields: [
                      {
                          foo: 'foo',
                          bar: 'bar',
                          name: 'SubLevel Object 1',
                      }
                  ]
              },
              {
                  foo: 'foo',
                  bar: 'bar',
                  name: 'SubLevel Object 2',
                  sub_fields: [
                      {
                          foo: 'foo',
                          bar: 'bar',
                          name: 'SubLevel Object 1',
                      },
                      {
                          foo: 'foo',
                          bar: 'bar',
                          name: 'SubLevel Object 2',
                      },
                      {
                          foo: 'foo',
                          bar: 'bar',
                          name: 'SubLevel Object 3',
                          sub_fields: [
                              {
                                  foo: 'foo',
                                  bar: 'bar',
                                  name: 'SubLevel Object 1'
                              }
                          ]
                      }
                  ]
              }
          ]
      }
  ]
  </code></pre>
  
  <p>Ideally, I'm aiming to take that original data and create something like this:</p>
  
  <pre><code>var newData = {
      'Object 1': null,
      'Object 2': null,
      'Object 3': {
          'Sublevel Object 1': {
              'Sublevel Object 1': null
          },
          'Sublevel Object 2': {
              'Sublevel Object 1': null,
              'Sublevel Object 2': null,
              'Sublevel Object 3': {
                    'Sublevel Object 1': null
               }
          }
      }
  }
  </code></pre>
  
  <p>I feel like I've been spending way too much time on this when I know there must be some kind of recursive function to make it happen --- I'm just a bit too inexperienced with the sort of thing that I'm struggling to find the solution. </p>
  
  <p>Can someone please show me what I could do? </p>
  
  <p><strong>EDIT</strong>
  Here's what I've tried. It's a jumbled mess and way too piecemeal --- embarrassing in fact haha --- but, in good faith, I didn't want you to think I haven't been trying to figure this out on my own:</p>
  
  <p>(also, the "field_group" being parsed is from a more relevant JSON data that I'm working with... not the above "foo/bar" example.)</p>
  
  <pre><code>var parsed_field_group = JSON.parse(JSON.stringify(field_group));
  var fields = field_group[0].fields;
  
  function removeKeys(obj, keys) {
      for (var prop in obj) {
          if(obj.hasOwnProperty(prop)) {
              switch(typeof(obj[prop])) {
                  case 'object':
                      if(keys.indexOf(prop) &gt; -1) {
                          delete obj[prop];
                      } else {
                          removeKeys(obj[prop], keys);
                      }
                      break;
                  default:
                      if(!keys.includes(prop)) {
                          delete obj[prop];
                      }
                      break;
              }
          }
      }
  }
  
  removeKeys(fields, ['name', 'wrapper'])
  
  console.log(fields)
  
  var newJson = Object.create(null);
  fields.forEach(field =&gt; {
      if (field.hasOwnProperty('sub_fields')) {
          newJson[field.name] = field
      } else {
          newJson[field.name] = null
      }
  })
  
  function handleSubFields(obj, key) {
      for (var prop in obj) {
          if (obj[prop]) {
              obj[prop][key].forEach(field =&gt; {
                  if (field.hasOwnProperty(key)) {
                      obj[prop][field.name] = field
                  } else {
                      obj[prop][field.name] = null
                  }
              })
              delete obj[prop][key]
              delete obj[prop].name
          }
      }
  }
  handleSubFields(newJson, 'sub_fields')
  
  console.log(newJson)
  </code></pre>
  
  <p>The above has gotten me very close, but I end up getting stuck on the sub_fields nested inside of an object's first sub_field.</p>
  
  <p>I know the above must be laughable. Please be kind! :-) </p>