Problems with handling arrays gotten from php by using jquery ajax

Question

Goog Morning, everyone.

I still have some problems trying to use arrays which were gotten from php. The problem is that when I got an array , I can not use it out of the "success function". So this is what is happening.

I create a var called "langs" to save array's information:

var langs=[];

Then, when I use console.log for print array's information INSIDE function success, my code seems like this:

$.ajax({
      type: 'POST',
      url: '/ws/languagesForJs',
      dataType: 'json',
      success: function(result) {
            langs=result;
            console.log(result)         
      },
  });

It works Great!! I can see the array's information. It looks like this:

Object {es: Object, en: Object}
 en: Object
       lang_ext_name: "en_US"
       lang_id: 2
       lang_iso: "en"
       lang_name: "Inglés"
       lang_url: "en"
      __proto__: Object
 es: Object
       lang_ext_name: "es_PE"
       lang_id: 1
       lang_iso: "es"
       lang_name: "Español"
       lang_url: "es"
 __proto__: Object
 __proto__: Object

HOWEVER,When I use console.log for print array's information OUTSIDE function success:

$.ajax({
      type: 'POST',
      url: '/ws/languagesForJs',
      dataType: 'json',
      success: function(result) {
            langs=result;

      },
  });
            console.log(result)

It returns just;

[]

Sincerely, I do not know why is it happens. Maybe I'm missing some function's theory or something. I've looked for info on the web;however, it seems that no one needs an array outside success functions. I haven't found any information about it.

I hope someone can help me. Thanks

Btw: Sorry for my bad english. It is not my mother language.

result is a local variable to the success function, it cannot be referenced outside of that function. Are you declaring result above the AJAX call as well? — thatidiotguy
– thatidiotguy, Commented Jul 9, 2013 at 15:28
No,my friend. I just declaring langs for saving the return data. — Leo
– Leo, Commented Jul 9, 2013 at 15:33

anthonyfojas · Accepted Answer · 2013-07-09 15:35:16Z

3

There are 2 issues here.

result is local to the success callback. You have access to langs outside of the callback since it doesn't appears to be globally scoped.
The callback happens asynchronously. This will likely cause the console.log call to happen before the success callback. It might be worthwile to look into the jQuery ajax promise objects, http://api.jquery.com/jQuery.ajax/.

answered Jul 9, 2013 at 15:35

anthonyfojas

3832 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bojangles Over a year ago

Asynchronous; can't stress that enough!

Leo Over a year ago

Seriously, I need to read more. It was true that the "console.log" ran before receiving the data. I have added the option "async: false" and I can see the information again, even if I use the array from outside the function. The issue of asynchrony on calls with "ajax" is extensive. Thanks for all your responses and you pacience.

anthonyfojas Over a year ago

async:false is deprecated as of jQuery 1.8. It also causes the browser to lock until after the ajax call. I highly recommend using the promise callbacks. Here's a good blog post about different ways of using the deferred promises. erichynds.com/blog/using-deferreds-in-jquery

intuitivepixel · Accepted Answer · 2013-07-09 15:44:40Z

1

The result is a local variable, you need to create a reference outside your ajax call, this way you can reference it without problems.

Try this:

var myResult;
$.ajax({
  type: 'POST',
  url: '/ws/languagesForJs',
  dataType: 'json'})
  .done(function(result) {
     myResult = result; // save a reference
     langs = result;
  })
  .always(function() {
    console.log(myResult);
  });

I should also mention that success is deprecated and you should go for done instead. The always callback is called as the names say's always so you can put there code that needs to be executed when the async call is done.

Hope it helps.

edited Jul 9, 2013 at 15:44

answered Jul 9, 2013 at 15:29

intuitivepixel

23.3k3 gold badges59 silver badges51 bronze badges

5 Comments

Bojangles Over a year ago

You get a big hairy downvote because this does pretty much the same thing as the original code, and doesn't fix the problem

Bojangles Over a year ago

I've removed the downvote because it technically works, but if you think about it you could just put the console.log() in the .done() call

intuitivepixel Over a year ago

@Bojangles, thanks and yes, you are right one more time :) just wanted to show a different ajax callback where things can also be safely put

Bojangles Over a year ago

That's fair enough then :). I quite like how the jQuery deferred stuff works

intuitivepixel Over a year ago

@Bojangles I like it to, it's just that I'm more used to ember.js implementation of it - RVSP.js see here for an answer of mine: stackoverflow.com/questions/17475657/…

Collectives™ on Stack Overflow

Problems with handling arrays gotten from php by using jquery ajax

2 Answers 2

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related