title: Observable (Angular) to populate Tree (NG-ZORRO) from REST API
body: <p>I am trying to populate a tree <a href="https://ng.ant.design/components/tree/en" rel="nofollow noreferrer">(NzTree from NG-ZORRO)</a> in my Angular Frontend from an endpoint returning data in tree structure as in the picture below (I've used Projections to fetch all children from a single table which had parent-child relationships - <a href="https://stackoverflow.com/questions/36542881/how-to-expose-a-complete-tree-structure-with-spring-data-rest-and-hateoas">same as depicted here</a>).</p>
  <p>Despite my many attempts, I am still failing to render the tree whilst it seems I'm getting the data correctly in (I believe I still have something to do for formatting!?).</p>
  <p><strong>Working example from NG-ZORRO:</strong></p>
  <pre><code>data = [
      {
        title: 'parent 1',
        key: '100',
        expanded: true,
        children: [
          {
            title: 'parent 1-0',
            key: '1001',
            expanded: true,
            children: [
              { title: 'leaf', key: '10010', isLeaf: true },
              { title: 'leaf', key: '10011', isLeaf: true },
              { title: 'leaf', key: '10012', isLeaf: true }
            ]
          },
          {
            title: 'parent 1-1',
            key: '1002',
            children: [{ title: 'leaf', key: '10020', isLeaf: true }]
          },
          {
            title: 'parent 1-2',
            key: '1003',
            children: [
              { title: 'leaf', key: '10030', isLeaf: true },
              { title: 'leaf', key: '10031', isLeaf: true }
            ]
          }
        ]
      }
    ];
  </code></pre>
  <p><strong>My endpoint:</strong></p>
  <p><a href="https://i.stack.imgur.com/9xvdw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9xvdw.png" alt="(see screenshot FYI)" /></a></p>
  <p><strong>The result I'm expecting as a tree:</strong></p>
  <p>BT<br>
  .ETO<br>
  ..ETO/A<br>
  ..ETO/M<br>
  ...ETO/MA<br>
  ....ETO/MAF<br>
  ...ETO/MD<br>
  .COO<br>
  ..COO/E<br>
  etc...</p>
  <p><strong>What I am getting in console:</strong></p>
  <p><a href="https://i.stack.imgur.com/Y5wd0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y5wd0.png" alt="enter image description here" /></a></p>
  <p><strong>service.ts:</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { OrganizationUnit } from '../common/organizationunit';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root',
  })
  export class OrganizationUnitService {
    private baseUrl = 'http://localhost:8080/api/v1/organizationUnits';
    private allOrgChildrenUrl =
      'http://localhost:8080/api/v1/organizationUnits/18?projection=organizationUnitAllChildren';
  
    constructor(private httpClient: HttpClient) {}
  
    getOrganizationUnitTreeData() {
      return this.httpClient.get(this.allOrgChildrenUrl).pipe(
        map(result =&gt; result));
    }
    
  }
  </code></pre>
  <p><strong>component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { OrganizationUnitService } from 'src/app/services/organizationunit.service';
  import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
  
  @Component({
    selector: 'app-organization-unit-tree',
    templateUrl: './organization-unit-tree.component.html',
    styleUrls: ['./organization-unit-tree.component.css'],
  })
  export class OrganizationUnitTreeComponent implements OnInit {
  
    //data: [];
  
    nzEvent(event: NzFormatEmitEvent): void {
      console.log(event);
    }
  
    constructor(private organizationUnitService: OrganizationUnitService) { }
  
    ngOnInit() {
  
      this.organizationUnitService
      .getOrganizationUnitTreeData()
      .subscribe((data) =&gt; {
        data;
        console.log(`data:`);
        console.log(data);
      });
  
    }
  }
  </code></pre>
  <p><strong>component.html</strong></p>
  <pre><code> &lt;nz-tree [nzData]=&quot;data | async&quot; nzShowLine (nzClick)=&quot;nzEvent($event)&quot;&gt;&lt;/nz-tree&gt;
  </code></pre>