Treelist data

Hi,

I’m enjoying webix more and more and I sure will be talking about it

I’m implementing a tree view and I’m looking at your example
https://snippet.webix.com/gallery/core/36a6b3c2

I’m dynamically passing the data from a REST endpoint and it’s obviously coming in as JSON.

I was hoping that the param url:"/myapi/myapp/treedata" would convert it to the javascript array…

1. As JSON is your default modus operandi, should you not do that for the developer as a framework provider?

2. Do I really need to write a function for this AND will the JSON.parse() do it?

my tree definition

{
          view:"tree",
          width:"150",
          id:"sTree",
          type:"lineTree",
          hidden:"true",
          select:true,
          template:"{common.icon()} #value#",
          //data: webix.copy(treeData)
          url:"/myapi/myapp/treedata"
        }

Thank you

I should have said that I get a

• Data loading error
  and
• Response: [EMPTY DATA]

and of course Postman works just fine with that end-point and I can see the JSON well.

FYI I’m just hardcoding a simple JSON based on you example in the above snippet or FYI

[
    {
        "id": "root",
        "value": "Root",
        "open": true,
        "data": [
            {
                "id": "1",
                "open": false,
                "value": "Group",
                "data": [
                    {
                        "id": "1.1",
                        "value": "Item-1"
                    },
                    {
                        "id": "1.2",
                        "value": "Item-2"
                    }
                ]
            }
        ]
    }
]

Thanks again for your support

Hi, this issue is still unresolved. Nudge, nudge…
I could not find a solution

I now need to populate a simple list and I’m facing the same issue

This is the View definition thats works (from one of your snippet examples)

{
            view:"list",      
            height:600,
            template:"#rank#. #title# <div style='padding-left:18px'> Year:#year#, votes:#votes# </div>",
            select:true,
            data: webix.copy(big_film_set),
            type:{
              height:62 
}

The data is

var big_film_set = [{"id":1,"title":"The Shawshank Redemption","year":"1994","votes":"678,79","rating":"9,2","rank":"1"},{"id":2,"title":"The Godfather","year":"1972","votes":"511,495","rating":"9,2","rank":"2"}]

When I replace the data definition from
data: webix.copy(big_film_set)
to
data: "/myapi/myapp/file
which returns a JSON array of objects
it simply does not work and it complains about parsing the valid JSON returned

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    toObject http://cdn.webix.com/edge/webix.js:988
    _onLoad http://cdn.webix.com/edge/webix.js:2435
    parse http://cdn.webix.com/edge/webix.js:2395
    data_setter http://cdn.webix.com/edge/webix.js:2312
    _load_when_ready http://cdn.webix.com/edge/webix.js:2302
    result http://cdn.webix.com/edge/webix.js:3221
    t http://cdn.webix.com/edge/webix.js:3165
    _view http://cdn.webix.com/edge/webix.js:3102
    _parse_cells http://cdn.webix.com/edge/webix.js:21242
    _parse_cells http://cdn.webix.com/edge/webix.js:21852
    result http://cdn.webix.com/edge/webix.js:3221
    t http://cdn.webix.com/edge/webix.js:3165
    _view http://cdn.webix.com/edge/webix.js:3102
    body_setter http://cdn.webix.com/edge/webix.js:7734
    _define http://cdn.webix.com/edge/webix.js:4588
    _parseSeetingColl http://cdn.webix.com/edge/webix.js:4595
    _parseSettings http://cdn.webix.com/edge/webix.js:4608
    result http://cdn.webix.com/edge/webix.js:3218
    t http://cdn.webix.com/edge/webix.js:3165
    _view http://cdn.webix.com/edge/webix.js:3102
    _ui_creator http://cdn.webix.com/edge/webix.js:3000
    ui http://cdn.webix.com/edge/webix.js:2968
    <anonymous> http://localhost:8080/pg13.html:319

I also see

JSON.parse: unexpected character at line 1 column 1 of the JSON data

However, curl and Postman do not report any issue… it all works smoothly.

Curl output FYI

$ curl -X GET -v -H "Content-type: application/json" -u _SYSTEM:SYS http://localhost:8080/myapi/myapp/file | jq
Note: Unnecessary use of -X or --request, GET is already inferred.
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
* Server auth using Basic with user '_SYSTEM'
> GET /myapi/myapp/file HTTP/1.1
> Host: localhost:8080
> Authorization: Basic X1NZU1RFTTpTWVM=
> User-Agent: curl/7.64.1
> Accept: */*
> Content-type: application/json
>
< HTTP/1.1 200 OK
< Server: nginx/1.21.3
< Date: Mon, 27 Sep 2021 12:04:17 GMT
< Content-Type: application/json; charset=utf-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< Cache-Control: no-cache
< Expires: Thu, 29 Oct 1998 17:04:19 GMT
< Pragma: no-cache
<
{ [105 bytes data]
100    94    0    94    0     0   1918      0 --:--:-- --:--:-- --:--:--  1958
* Connection #0 to host localhost left intact
* Closing connection 0
[
  {
    "name": "darwin.iso"
  },
  {
    "name": "Data.csv"
  },
  {
    "name": "docker-compose.yml"
  },
  {
    "name": "films.csv"
  }
]

Pretty please, suggest what else I should be trying out…

Thank you

I have solved the issue with a programmatic work-around on the UI side, which means that my REST end point and my JSON are fine.

for posterity: use a button or another component or event to allow you write a function so that you can do it all yourself. Not exactly what I call RAD but it work.

webix.ajax().headers({"Content-type":"application/json"}).get("/myapi/myapp/file").then(function(data) {

  jsonAr = data.text()

  $$("list1").parse(jsonAr);

HTH