Observable (Angular) to populate Tree (NG-ZORRO) from REST API

Question

I am trying to populate a tree (NzTree from NG-ZORRO) 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 - same as depicted here).

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!?).

Working example from NG-ZORRO:

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 }
          ]
        }
      ]
    }
  ];

My endpoint:

The result I'm expecting as a tree:

BT
.ETO
..ETO/A
..ETO/M
...ETO/MA
....ETO/MAF
...ETO/MD
.COO
..COO/E
etc...

What I am getting in console:

service.ts:

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 => result));
  }
  
}

component.ts

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) => {
      data;
      console.log(`data:`);
      console.log(data);
    });

  }
}

component.html

 <nz-tree [nzData]="data | async" nzShowLine (nzClick)="nzEvent($event)"></nz-tree>

I believe I'm having a problem with this scenario stackoverflow.com/questions/42718440/observablearray-angular2 — Panda
– Panda, Commented Aug 11, 2020 at 8:19

Panda · Accepted Answer · 2020-08-11 14:48:31Z

0

Solution found by returning array from my service, just put result in between [ ];

  getOrganizationUnitTreeData(): Observable<any> {
    return this.httpClient.get(this.allOrgChildrenUrl).pipe(
      map(result => [result]));
  }

answered Aug 11, 2020 at 14:48

Panda

912 gold badges4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Observable (Angular) to populate Tree (NG-ZORRO) from REST API

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related