JsTree和Laravel麻烦

Question

I'm following this guide to setup JsTree with lazy load using Ajax in my Laravel 5.5 app .

This is my controller: https://gist.github.com/aaronr0207/7fa0a38f40bfd2f728a15d655254f82d

My View: https://gist.github.com/aaronr0207/f87720263e3d6026b04b00c08bae5cb2

My JsTree class is exactly the same I didn't make any change.

Actually I'm getting the following error on chrome's console:

d9973d3e-1476-4453-a013-9e9c8430bcba:1 Uncaught TypeError: Cannot read property 'children' of undefined

But when I dump the response to debug it (at the end of TreeViewController data method):

        dd(response()->json($tree->build()));

It works...

My response looks like this (when I die-dump it):

Any idea? Thank you

EDIT1: If I return a simple json_encode($tree->build) there are no errors but it shows an empty tree... and the response looks like this:

EDIT2: got it! But now there are a new issue... All I did to solve it was change the url string with a callback:

 $('#jstree').jstree({
    'core': {
        'data': {
            'url': function (node) {
                return '{!! route('tree.data') !!}' ;
            },
            'data': function (node) {
                console.log(node);
                return {'id': node.id};
            }
        }
    }
});

But now when I fetch next level directories, if they have another directorie inside it fails without error:

Test1 content is the following:

If I delete test1/test2 folder, it works showing:

Same when I delete the txt file...What is happening now? Maybe this is a new question so I'll post my solution to the main problem and I'll accept it.

Answer 1

got it! All I did to solve it was change the url string with a callback:

$('#jstree').jstree({
    'core': {
        'data': {
            'url': function (node) {
                return '{!! route('tree.data') !!}' ;
            },
            'data': function (node) {
                console.log(node);
                return {'id': node.id};
            }
        }
    }
});