Question

The idea of the code I´m developing right now is extracting data from a JSON file (which I get from a server) and then show the results using a beautiful and nice graphic. The problem is I can’t retrieve the object where I save the JSON results in the Jquery code so I can load them in the graphic.
To simplify, my code is like this (Javascript part)

var obj; //I initialize it here in order to make it global though it doesn't work

function handle_json() {
  if (http_request.readyState == 4) {
     if (http_request.status == 200) {
      var json_data = http_request.responseText; 
      obj = eval("(" + json_data + ")");
      //at this point I have the information I want in "obj"
} else {
  alert("A problem ocurred.");
}
http_request = null;

}
}

But now I want to send “obj” to my jQuery code so I can access to the information and show it.
But if try this (jQuery part)

$(function () {
 alert(obj.results.bindings[0].a.value); //<-- this doesn't work, obj isn't initialized
var fert = [];
fert = [[1990, 1.28], [1995, 1.25], [2000, 1], [2005, 1.3], [2010, 1.83]];

var plot = $.plot($("#placeholder"),
       [ { data: fert, label: "Fertility"} ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 2}
         });

I see what the problem is, I’ve made an asynchronous Ajax call and I need to execute jQuery right after I evaluate de json info ( obj = eval(“(” + json_data + “)”) ) but I just don’t know how!
If it helps I’ve used a library called “flot” to do the graphics.
Thanks a lot! Any help would be apreciated 🙂

Answer 1

Currently your jQuery code is in a document ready handler, so (obviously) it runs as soon as the document is ready – timing that isn’t related to your Ajax call at all. Instead, put your jQuery code in its own function and call it from right after you set obj. Or just move the jQuery code directly into the function where you set obj:

  var json_data = http_request.responseText; 
  obj = eval("(" + json_data + ")");
  //at this point I have the information I want in "obj"
  // either process obj directly here, or call a function to do it...
  processData(obj);

  ...

  function processData(obj) {
     // your jQuery code here, using obj
  }

Better though, since you’re using jQuery anyway, would be to do the Ajax with one of jQuery’s Ajax functions. I’d suggest $.getJSON().

$.getJSON("yourURLhere", function(obj) {
    // your jQuery code using obj here
});