triggering events and ajax

Question

I'm new to both ajax and jquery, so please excuse the beginner question. I'm confused about the process of calling and returning JSON objects using AJAX, and having that data being available to the rest of your program.

If I have a function like this:

function treeData(){
  $.getJSON("/recipe/recipelist/", function(data) {

    // sorts array by title, alphabetically 
    data.sort(function(a, b){
        return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
    }); 

    return data; 
  });
}

and I try to access that data like so,

var obj = treeData(); 

i get an error saying that obj is undefined. Basically, I don't understand why this isn't working. I'm assuming it has something to do with my return statement. I'd like to be able to build another "delete" function which, when called, triggers a .getJSON request and redraws my list of database entries.

Thanks in advance.

Answer 1

You must send it a callback so that you can do something with the returned data of treeData

//modified tree data
function treeData(callback){
    $.getJSON("/recipe/recipelist/", function(data) {
        data.sort(function(a, b){
            return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
        }); 
        callback(data); //supply the callback with the data
    });
}

var obj;

treeData(function(newdata){  //the supplied data
    obj = newdata            //assign to obj
});

Answer 2

The A in AJAX stands for asynchronous, which means that the code doesn't wait for the response to arrive, but a callback function gets called when it does. If you try to return the value immediately, it won't be set yet.

Use a callback in your function too:

function treeData(callback){
  $.getJSON("/recipe/recipelist/", function(data) {

    // sorts array by title, alphabetically 
    data.sort(function(a, b){
        return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
    }); :


    callback(data); 
  });
}

Usage:

treeData(function(obj){
  // here you can use the result
});

Answer 3

You can't do it that way. The return statement returns from the inner function, not the treeData function.

function treeData() {

  $.getJSON("/recipe/recipelist/", function(data) {

    // sorts array by title, alphabetically 
    data.sort(function(a, b){
        return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
    }); 

    // this is in the inner function
    return data; 
  });

  // this is in the treeData function
  return "whatever";
}

You can use Deferred to do that.

function treeData() {
  return $.ajax({
      url: "/recipe/recipelist/",
      type: "get",
      dataType: "json"
  });
}

$.when( treeData() ).then(function(data) {
    data.sort(function(a, b) {
        return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
    });
    var obj = data;
    // you can use obj safely
});

Answer 4

You can't return from the callback. Instead, you should assign data do a variable declared outside treeData , or just do what you need to do with data inside the callback.

Answer 5

By default AJAX requests are asynchronous, by the time your function returns, the AJAX request hasn't yet completed and the data is not available. You have to start using your data from the callback function you pass to $.getJSON . That way, your code will have access to the data. Joseph has provided an example of this.

Answer 6

$.getJSON is an asynchronous request, which means that the code is executed but doesn't wait around for it to finish. The code won't work for two reasons:

1. You're probably assigning the value of treeData() before getJSON has even finished executing.

2. treeData() doesn't actually return any value in your example, the getJSON callback does.

This would work:

var obj;

function treeData(){
  $.getJSON("/recipe/recipelist/", function(data) {

    // sorts array by title, alphabetically 
    data.sort(function(a, b){
        return b.title < a.title ? 1 : b.title > a.title ? -1 : 0;
    }); 

    obj = data; 
  });
};

treeData();

But you wouldn't know when the getJSON callback had finished firing, so you'll probably want to work with the result of the sort within the callback itself.