ngx-tree-select icon indicating copy to clipboard operation
ngx-tree-select copied to clipboard

Not able to assign JSON data from a service directly to the items variable.

Open johnenosh92 opened this issue 6 years ago • 5 comments

I am not able to assign JSON data from a service directly to the items variable. It should accept any array of objects. If I do, the drop down shows all names as [object object]. In the Demo Application, there was a exported const array that was assigned. Would have to do the same to be able to display the data correctly?

johnenosh92 avatar May 16 '19 06:05 johnenosh92

[object object] indicate you ask a complex object to be displayed. Check textField parameter correspond to a property of your object you want to display

Crazyht avatar May 16 '19 11:05 Crazyht

[ { "data": { "branchID": 13, "branchName": "Hyderabad", "branchCode": "Hyd", "parentBranchId": null, "currentBranchId": null, "treeLevel": null } } ]

Above is the data I have and the tag attribute I have given is like this: textField="data.branchName". I have multiple levels in the data. The number of levels are shown perfectly, but the text is shows as [object object]

johnenosh92 avatar May 16 '19 11:05 johnenosh92

I'm not convinced path is well handled in text or id field property, never test this case. Finally, I call something like item[textField] to get value (item["data.branchName"] in your case), I think js don't handle this correctly.

Crazyht avatar May 16 '19 11:05 Crazyht

The solution doesnt work. My data is as below: this.branches =[ { "data": { "branchID": 15, "branchName": "kachigoda", "branchCode": "kachi", "parentBranchId": null, "currentBranchId": null, "treeLevel": null }, "children": [ { "data": { "branchID": 18, "branchName": "uppal", "branchCode": "upl", "parentBranchId": null, "currentBranchId": null, "treeLevel": null }, "children": [ { "data": { "branchID": 19, "branchName": "chiluka Nagar", "branchCode": "upl", "parentBranchId": null, "currentBranchId": null, "treeLevel": null }, "children": [ { "data": { "branchID": 20, "branchName": "MalliKarjuna Nagar", "branchCode": "M N", "parentBranchId": null, "currentBranchId": null, "treeLevel": null }, "children": [] } ] } ] } ] } ]

And as suggested, I have given it like this in my template: <tree-select name="Branch" [items]="branches" textField="branches['data.branchName']" childrenField="children"

Doesnt work.

johnenosh92 avatar May 16 '19 11:05 johnenosh92

The package is very confined and takes data if it is only in the format that you have provided. any change in nesting and naming convention {"id":03,name:"India"} seems to be compulsory after a lot of testing.

There seems to be other workaround other than rearranging the data to be in the same format as your demo has used.

johnenosh92 avatar May 16 '19 12:05 johnenosh92