JavaScript scopes with jQuery AJAX

Question

I have a situation where I want to have a global variable like a whose value I'll be fetching from jQuery Ajax from some server and then want the value to be available on call from other function. To visualize:

var a = [];

$(document).ready(function () {
  $.ajax({
    type: 'GET',
    url: 'some url',
    success: function (response) {
      a = response.somearray;
    },
    error: function () {
      alert("Not successfull");
    }
  });
});

function something() { // this function will be called onclick of a button in html
  console.log(a); // here I want the value that came from the server. But currently, it's printing empty array
}

What I have tried are as follow:

Removing var keyword from (a) to make it global.
Assigning no value (here empty array) to (a) declaration above (that turned out to be a blunderous mistake though).
Removing (a) declaration completely from the top.

The thing to take care about is that something() function is being called from an HTML button on complete page load and after ajax call. So value is already available.

Looks right, for the most part, what problem are you running into? — CertainPerformance, Dec 19 '18 at 06:23
As long as the user clicks the button after the response comes back (which is likely unless the server is laggy), it *shouldn't* be empty. Is this the *actual code* you're using? — CertainPerformance, Dec 19 '18 at 06:28
You have a bracket mismatch by the way, did you check the js errors? — antoni, Dec 19 '18 at 06:30
This is a demo code @antoni so bracket mismatch is not something I am interested in. The response from the server is coming with populated somearray already so I am interested in the functionality rather than syntax. — MiKr13, Dec 19 '18 at 06:54
yout code is working https://codepen.io/anon/pen/ZVByrb I can't find any problem with it. so the only reason for your code to not work is if somearray is empty array or the click event happens before the server returned a response — Nirit Levi, Dec 19 '18 at 07:58
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Makyen, Dec 19 '18 at 11:36
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321) — Makyen, Dec 19 '18 at 11:37

antoni · Accepted Answer · 2018-12-19T06:57:53.517

1

Here is a working example of what you want, check the console logs: https://codepen.io/antoniandre/pen/NebpQj?editors=0010

var a = [];

$(document).ready(function () {
  $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
    tags: "snowboarding",
    tagmode: "any",
    format: "json"
  })
  .done(function (response) {
    a = response.items;
    // something(); Don't need this.
  });
});

function something() { // this function will be called onclick of a button in html
  console.log(a); // here I want the value that came from the server. But currently, it's printing empty array
}

EDIT:

HTML:

<button onclick="something()">hello</button>

edited Dec 19 '18 at 06:57

answered Dec 19 '18 at 06:36

antoni

5,001
1
35
44

1

His `something()` is only called onclick. He doesn't want it to be called automatically. (and even if it were, this implementation basically is no different from OP's current code - it won't fix whatever problem he's running into) – CertainPerformance Dec 19 '18 at 06:38
OP says calls after ajax call – antoni Dec 19 '18 at 06:40
Why don't you post your own answer instead of criticising other responses, your response won't fix it neither if you have none – antoni Dec 19 '18 at 06:42
After ajax call, *when the button is clicked* - see the `this function will be called onclick of a button in html` – CertainPerformance Dec 19 '18 at 06:42
Because OP's problem cannot be reproduced given the code he's posted - he's not posted his real code, so it's impossible to tell what exactly's going wrong – CertainPerformance Dec 19 '18 at 06:42
function something() should be called on a button click from HTML. – MiKr13 Dec 19 '18 at 06:50
refreshed codepen. – antoni Dec 19 '18 at 06:54
So you are proposing to call the function twice? Right? – MiKr13 Dec 19 '18 at 06:56
no you can remove it from the done! are you serious in here? – antoni Dec 19 '18 at 06:56
Okay, so this works. Can you explain why the same thing is working here while it is not working in my code? – MiKr13 Dec 19 '18 at 06:59
Well we don't have your code... what is the endpoint? – antoni Dec 19 '18 at 07:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185463/discussion-between-mihir-kumar-and-antoni). – MiKr13 Dec 19 '18 at 07:02

Альберт Аллагулов · Answer 2 · 2018-12-19T06:32:41.100

-1

Scope was lost, since ajax callback is asynchronous function. I think, it should be

var a = [];

$(document).ready(function () {
  var me = this;
  $.ajax({
    type: 'GET',
    url: 'some url',
    success: function (response) {
      me.a = response.somearray;
    },
    error: function () {
      alert("Not successfull");
    });
});

edited Dec 19 '18 at 06:32

answered Dec 19 '18 at 06:29

Альберт Аллагулов

1
2

There are no `this` issues with OP's code. – CertainPerformance Dec 19 '18 at 06:31

JavaScript scopes with jQuery AJAX

2 Answers2