use variable under ajax call globally in javascript

Question

I created a java script file that get the images from flickr. Now I want that data can be accessed globally.

$.getJSON('js/album.json', function(data) {
    var myArray = data.children;
    $.each(myArray, function(i, item) {
        $.each(item.children, function(j, childItem){
            var childName = childItem.name;
            getFlickrImage(childName, handleData, data);
        });
    });
    new_json = data;
});

I want the new_json variable access globally. I tried a lot, after so much search on google I posted here.

`new_json` is available globally (because you haven't used `var`) but it isn't available globally UNTIL the response has been returned from the server. — Adam Jenkins, Dec 18 '13 at 12:16
@user3115091 - see my answer below. You need to use `callback` functions (or events) when dealing with asynchronous programming. Start with `callbacks`. — Adam Jenkins, Dec 18 '13 at 12:24

score 0 · Answer 1 · answered Dec 18 '13 at 12:01

Answering your question, remember that any "global variable" is just a member of the window's object (when working on browsers). So you just must use:

//...
window.new_json = data
//...

In order to access "new_json" anywhere on your code.

But remember, global variables are evil :) So I would put it inside another object at least.

As a personal advice, I think you should take a look to Jquery's Promises first, because you can't ensure elsewhere on your code that new_json is properly fulfilled. Or also think other design patterns (module pattern, maybe) in order to make your app cleaner.

score 0 · Accepted Answer · answered Dec 18 '13 at 12:18

Some pretty bad answers here so far.

In the asynchronous world of AJAX, you need to do things with callbacks. With AJAX, you never know when (or even if) the data that you've asked for will become available. It depends on things like the clients internet connectivity, latency, your server's speed, traffic etc.

So you have to do it like this:

function doSomeAjaxCall(myCallback) {

  $.getJSON('js/album.json', function(data) {
      var myArray = data.children;
      $.each(myArray, function(i, item) {
          $.each(item.children, function(j, childItem){
              var childName = childItem.name;
              getFlickrImage(childName, handleData, data);
          });
      });
      new_json = data;

      myCallback.apply(window);    

  });

});

doSomeAjaxCall(function() {
  console.log(new_json); //see? it is available globally.
});

Curious, what's up with the downvoter? Admittedly, this isn't the only way to do this, but there's also about ten different ways, this is just an example of one way. — Adam Jenkins, Dec 18 '13 at 13:46

score -2 · Answer 3 · edited May 23 '17 at 12:24

-2

You can't. You have to make call synchronously.

See this related question for more information.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 18 '13 at 12:07

ranjeet

540
7
16

This answer is wrong. – Adam Jenkins Dec 18 '13 at 12:23

use variable under ajax call globally in javascript

3 Answers3