Angular-tree-component: TypeError: this.getField(...).map is not a function

[michael-hawker]

Using angular-tree-component 3.2.3.

In my template:

<tree-root *ngIf="nodes" [nodes]="nodes" class="box left"></tree-root>

In my App Component constructor:

export class AppComponent  { 
    name = 'Angular'; 
    nodes: any;

   public constructor(private service: MyService) {
    this.service.getdata().subscribe(
                    data => this.nodes = data,
                    err => console.error(err),
                    () => console.log('get complete')
                );

As soon as my data callback returns from getting data from my service and tries to add to the nodes property, I get this:
TypeError: this.getField(...).map is not a function at TreeNode._initChildren (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:21686:14) at new TreeNode (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:21349:18) at TreeModel.exports.TreeModel.TreeModel.update (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:21785:28) at executeAction (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:670:19) at TreeModel.res (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:661:16) at TreeModel.exports.TreeModel.TreeModel.setData (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:21776:14) at executeAction (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:670:19) at TreeModel.res (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:661:16) at TreeComponent.exports.TreeComponent.TreeComponent.ngOnChanges (http://localhost/node_modules/angular-tree-component/dist/angular-tree-component.umd.js:22585:24) at Wrapper_TreeComponent.ngDoCheck (/TreeModule/TreeComponent/wrapper.ngfactory.js:60:18) at View_AppComponent1.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:45:27) at View_AppComponent1.AppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:12208:18) at View_AppComponent1.DebugAppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:12355:48) at ViewContainer.detectChangesInNestedViews (http://localhost/node_modules/@angular/core/bundles/core.umd.js:12466:41) at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:197:14)

I tried adding "import 'rxjs/add/operator/map';" to my service and my component, but that didn't help.

[adamkleingit]

Can you paste the structure of your nodes?
I'm guessing that children is not an array.

[adamkleingit]

@michael-hawker any updates?
I'm closing the issue - if it persists please re-open

[sahanabalu]

I am still having this issue. I am a newbie to Angular. children is an array

[valeraStarik]

Проблема все еще осталась

[frontowiec]

+1

[bipinmangwani1]

Note that root node has to be an array too.

[CubikNeRubik]

Maybe this information will be helpful for somebody.
Problem is reproduce when component id equal to name of variable with node structure:

This template throw error TypeError: this.getField(...).map is not a function
<tree-root #tree [nodes]="tree" ></tree-root>

And this one work fine:
<tree-root #tree-root [nodes]="tree" ></tree-root>

[Ekaanth]

Even I'm facing the same error anyone got the solution?

my JSON:

{
"id": 1,
"parent": 0,
"hid": "001",
"type": "ORG",
"orgCode": "H1000",
"headEmpNo": 1,
"headRoleId": 1,
"offset": 0,
"count": 0
}

When I pass this JSON to nodes parameter

<tree-root [nodes]="nodes" [options]="options"></tree-root>

[dodinz]

So what's the real solution here? My root node is alraeady an array and the asyncChildren is also an array.

[indianazhao]

I solved this issue by using toPromise() to return a promise instead of observable.

[adamkleingit]

You can't pass a null object. Either hide the tree until the data is ready or start with an empty array