title: How to perform a nested reduce operation with RxJs?
body: <p>I'm trying to morph a series of file paths into a nested recursive structure for an Angular Material <a href="https://material.angular.io/components/tree/overview" rel="nofollow noreferrer">Tree component</a>. The structure needs to be this:</p>
  <pre><code>interface FileTreeNode {
      name: string;
      children?: FileTreeNode[];
  }
  </code></pre>
  <p>So a list of file paths such as <code>['path/to/file/01.txt', 'path/to/file/02.txt', 'another/to/file/03.txt']</code> will transform into:</p>
  <pre><code>[
      {name: 'path', children: [
          {name: 'to', children: [
              {name: 'file', children: [
                  {name: '01.txt'}, {name: '02.txt'}
                  ]
              }]
          }]
      },
      {name: 'another', children: [
          {name: 'to', children: [
              {name: 'file', children: [
                  {name: '03.txt'}
                  ]
              }]
          }]
      }
  ]
  </code></pre>
  <p>I saw a great answer for this problem <a href="https://stackoverflow.com/questions/59049635/how-to-transform-array-of-strings-into-specific-tree-structure-in-javascript">here</a>, which uses the built-in <code>Array.reduce()</code> method, but I'd like to accomplish this with RxJs operators.</p>
  <p>Here is the code I'm trying to replicate:</p>
  <pre><code>var paths = [&quot;path/to/file1.doc&quot;, &quot;path/to/file2.doc&quot;, &quot;foo/bar.doc&quot;],
      result = [];
      
  paths.reduce((r, path) =&gt; {
      path.split('/').reduce((o, name) =&gt; {
          var temp = (o.children = o.children || []).find(q =&gt; q.name === name);
          if (!temp) o.children.push(temp = { name });
          return temp;
      }, r);
      return r;
  }, { children: result });
  
  console.log(result);
  </code></pre>
  <p>Here's what I have so far:</p>
  <pre><code>reduce((acc, curr) =&gt; {
      return curr.split('/').reduce((obj, name) =&gt; {
          let temp = (obj.children != null ? obj.children : obj.children = []).find(node =&gt; node.name === name);
          if (temp == null) {
              obj.children.push(temp = {name});
          }
          return temp;
      }, acc);
  }, {children: []} as FileTreeNode),
  </code></pre>
  <p>But this is only returning the last node in the observable (eg. <code>{name: 03.txt}</code>). What I want to be passing along is the final value of <code>acc</code> as the above code does. I also would like to accomplish this using just the RxJs operators, instead of having to rely on the internal Js <code>Array.reduce()</code> function if possible.</p>
  <p>Thanks!</p>