JSTree loading lazy loading not working for my resource url but is for sample url

Question

I am loading data as per an example I found using the code below. It allows me to specify a url and using the sample's url https://www.jstree.com/fiddle/?lazy I get a working tree on my page. This url returns a json of:

[{"id":1,"text":"Root node","children":[{"id":2,"text":"Child node 1","children":true},{"id":3,"text":"Child node 2"}]}]

I have created my own url which returns exactly the same json. My problem is that using my url it delivers a single tree node with my json string as the name of the node as per my attached image. As far as I can see both urls are returning the same json string and is just raw text but I don't understand why it is interpreting mine incorrectly. Could anyone help me understand what I am doing wrong?

    $(function() {
      $('#jstree').jstree({
        'core' : {
          'data' : {
            "url" : "/_content/data/table/companytree.aspx/?lazy",
            "data" : function (node) {
              return { "id" : node.id };
            }
          }
        }
      });
    });

apologies I added the wrong code snippet

The first image is using the sample url and the second is using mine..

Answer 1

Only thing I can think of, while server is returning the data it need to have the response header. Please check this, I think thats the issue, rest looks good to me.

content-type: application/json; charset=utf-8

You can also try once, adding the contentType, I have not used this structure exactly, but generally this will tell that the return type is json incase thats not in header.

$(function() {
      $('#jstree').jstree({
        'core' : {
          'data' : {
            "url" : "/_content/data/table/companytree.aspx/?lazy",
            "contentType": "application/json; charset=utf-8",
            "data" : function (node) {
              return { "id" : node.id };
            }
          }
        }
      });
    });