Using ajax request with on success callback to format object

[jackson tan]

Hi,

I tried searching for answers in the docs and in the forum but can't find anything relating to my question.

How can I use the success callback of the ajax used as the data of the tree? My ajax request returns a json with a couple of other things like error status or message and so I want to use the success callback to format it and just give the tree the json data without the message.

I updated the jsFiddle demo of "Populating the tree using AJAX and lazy loading nodes" and tried returning a custom json but it it not being reflected by the tree. I already successfully implemented this but I used a function in the data of the jstree which will load the lazy loading of node but the loading spinning icon doesn't show automatically.

TLDR: How do I use success callback of ajax of jstree to format the json before feeding it to the tree?

http://jsfiddle.net/2kwkh2uL/352/

Code in jsFiddle
$('#container').jstree({
    'core' : {
        'data' : {
            "url" : "//www.jstree.com/fiddle/?lazy",
            "data" : function (node) {
                return { "id" : node.id };
            },
            "success": function(data){
                    return [{"id": 1, "text": "Updated Root node", }, {"id": 2, "text": "Updated Child node 1", "parent": 1, "children": true}];
            }
        }
    }
});

[Ivan Bozhanov]

Hi,

You can not use the success callback to make changes to the JSON that jstree receives. You have two options:

Option 1)
Use the built-in jQuery "dataFilter" method:
'data' : {
  'url' : ...
  'dataFilter' : function (data) {
    // process the data any way you want (console.log(data) to see what you have, transform it and return the new object)
    // keep in mind for some jQuery versions (older ones) you will have to return a string and not an object - if that is the case "return JSON.stringify(new_data);" will do
    return new_data;
   }

Option 2)
Instead of having jstree make the AJAX calls for you, set core.data to a function, make the call yourself and return the processed object to jstree (I will be using your code from above):
data : function (node, cb) {
  $.ajax(
            "url" : "//www.jstree.com/fiddle/?lazy",

            "data" : { "id" : node.id },
            "success": function(data) {
                    cb([{"id": 1, "text": "Updated Root node", }, {"id": 2, "text": "Updated Child node 1", "parent": 1, "children": true}]);
            }

  );
}
Notice that instead of return the callback function is executed.

Best regards,
Ivan

[jackson tan]

Hi Ivan,

Thanks for the reply. Option 1 worked for me thanks. I forgot to look for the jquery ajax request function to format the response. Jstree is cool and you rock!! Thanks again.