title: Javascript Recursive Function doesn't work for arranging data
body: <p>When I run this code, for some reason I believe the recursive arrange method is not doing the right thing. Any of the inner groupings are not present in the output for the filter function. What am I doing wrong with functional javascript?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const def = x =&gt; typeof x !== 'undefined'
  
  const filter = ([x, ...xs], fn) =&gt; def(x)
      ? fn(x)
          ? [x, ...filter(xs, fn)] : [...filter(xs, fn)]
      : []    
  
  let arrange = t =&gt; {
    return { num: t.id, groups: t.groups.map(arrange) }
  }
  
  let data = [
    {id: 1, groups: [{id: 3, groups: []}]},
    {id: 4, groups: []},
    {id: 5, groups: []}
  ]
     
  let groups = data.map(arrange)
  
  console.log(groups)
  // =&gt; [ { num: 1, groups: [ [Object] ] },
  //      { num: 4, groups: [] },
  //      { num: 5, groups: [] } ]
  
  let getById = g =&gt; {
      if (g.num === 3) {
        return true
      } else {
        return false
      }
  }
  
  let filtered = filter(groups, getById)
  
  console.log(filtered)
  // []</code></pre>
  </div>
  </div>
  </p>