Angular 4 ngx-treeview integration with json response

Question

I'm currently new to angular 4 and using ngx-treeview(https://www.npmjs.com/package/ngx-treeview) to get the tree structure. Using static data able to bind view the tree.

But need to use the rest service to get the tree structure hence created a similar class TreeviewItem from ngx-treeview

public class TreeviewItem
{
    public string Text { get; set; }
    public int Value { get; set; }
    public bool Collapsed { get; set; }
    public TreeviewItem[] Children { get; set; }
}

Here is json response which i'm getting

[{"text":"Core Fields","value":100,"collapsed":false,"children":null}]

Angular service:

return this.http.get(this.appHelpersSvc.apiAddress + 
"api/module/getStandardFields", { headers: httpHeaders })
.map((response:Response) => <TreeviewItem>response.json());

Angular Component

itemsList: TreeviewItem[]; 
this.moduleService.getStandardFields().subscribe(data => {this.itemsList = data;});

Doing so i'm getting

Uncaught TypeError: this.items[i].getCheckedItems is not a function
at TreeviewComponent.getCheckedItems (http://localhost:4001/main.bundle.js:42763:107)
at TreeviewComponent.raiseSelectedChange (http://localhost:4001/main.bundle.js:42745:34)
at TreeviewComponent.ngOnChanges (http://localhost:4001/main.bundle.js:42703:22)
at checkAndUpdateDirectiveInline (http://localhost:4001/vendor.dll.js:12160:19)
at checkAndUpdateNodeInline (http://localhost:4001/vendor.dll.js:13586:17)
at checkAndUpdateNode (http://localhost:4001/vendor.dll.js:13525:16)
at debugCheckAndUpdateNode (http://localhost:4001/vendor.dll.js:14228:59)
at debugCheckDirectivesFn (http://localhost:4001/vendor.dll.js:14169:13)

not able to understand what is going wrong. thanks for any help.

Leo Vo · Accepted Answer · 2017-08-20 09:48:34Z

9

I am author of this component. You need to map your JSON to list of TreeviewItem:

const list = items.forEach(item => new TreeviewItem(item));

and then binding list to component.

answered Aug 20, 2017 at 9:48

Leo Vo

10.4k9 gold badges59 silver badges80 bronze badges

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

3 Comments

Karty Over a year ago

Hi, Leo Vo, You made a great tool, may i know how can i uncheck all the checkbox by default.

Avtandil Kavrelishvili Over a year ago

Hello, how can I set checkbox values when I get checked items values from Database ? I'm trying to do that: this.values = this.claims.map(x => x.checkedId); but no result. can you help me ? thank you

Maulik Over a year ago

I am also having dynamic json but not acceptable by ngx-trreview. It only accepts it's interface's property. Should I convert my json in required treeview format ? Or is there any way like whatever json we get from response we get a treeview like UI ?

user7234965 · Accepted Answer · 2017-07-26 11:56:36Z

what is items in your code? why did you create TreeviewItem class with three properties in it? Did you try to make new TreeviewItem type and make cast to it to make json work? I do not think you need it because there is already TreeviewItem.

Anyway, try do new TreeviewItem(json) (where json is json string you get from server) instead of casting to TreeviewItem. But do this in component, not in service. Remove the casting in service. Leave the service with return of any. By the way, if you do the cast, you should do it in component and not in service. Should be more efficient, unless you are going to get only treeviews in every requests.

I am not pro, but I think you should not use cast just because you know that it is possible. If there is a way of creating object you should create it. By the way, there is documentation with an example of creating new item.

Jamith NImantha · Accepted Answer · 2019-12-24 09:59:58Z

1

this.itemsList = data.map(value => {
            return new TreeviewItem({text: value.name, value: value.id, collapsed: true, children: filterChildren});
        });

use map method to iterate and create a new TreeView object and pass json object to the constructor.

answered Dec 24, 2019 at 9:59

Jamith NImantha

2,3273 gold badges24 silver badges28 bronze badges

Comments

IronAces · Accepted Answer · 2017-08-21 11:08:14Z

0

I got the solution by doing like this

ngOnInit() { 
   this.service.getTreeViewdata() 
      .subscribe( items => 
                     this.items = items, error => 
                        this.errorMessage = error, () => 
                           this.fillitemdata()
      ); 
      debugger;
}

private fillitemdata(): void { this.items = this.getData(); }

getData(): any[] { const itCategory = new TreeviewItem(this.items[0]); return [itCategory]; }

edited Aug 21, 2017 at 11:08

IronAces

1,9011 gold badge28 silver badges37 bronze badges

answered Aug 21, 2017 at 8:30

Surya Kumar

111 silver badge3 bronze badges

Comments

PeterPazmandi · Accepted Answer · 2021-10-28 07:32:16Z

0

My solution looks like this:

private generateTreeviewItemArray(categories: Category[]): TreeviewItem[] {
    let treeViewItems: TreeviewItem[] = [];
    for (let index = 0; index < categories.length; index++) {
      treeViewItems.push(new TreeviewItem({
          text: categories[index].name,
          value: categories[index].id
        } as TreeItem
      ));
    }
    return treeViewItems;
}

I create a new TreeviewItem using its constructor, where I create from the Category item a new Treeview object.

answered Oct 28, 2021 at 7:32

PeterPazmandi

60111 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular 4 ngx-treeview integration with json response

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related