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 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
});