Javascript and JQuery array variables

Question

I'm having trouble using an array within javascript that I build from a jquery ajax call. I can create the array, and know it exists in the jquery function because I can log it in the browser console.I am not picking it up after the function runs though, as it comes back as undefined after the crews = loadCrews() line. Here's my main javascript file:

$(document).ready(function(){
     var crews = [];
    console.log("loading crews")
    crews = loadCrews();
   console.log(crews);

 $('#datetimepicker1').datetimepicker({
     pickTime: false
    });
 $('#datetimepicker2').datetimepicker({
       pickTime: false
    });

 $("#input_form").submit(function(){

     console.log(crews)
     var querystring = $(this).serialize();
             alert(querystring)
     return false;
         });

});

function loadCrews(){
 $.getJSON( "url", function( data ) {
    var items = [];
  $.each( data, function( key, val ) {
    items.push(val.UNID);
        })
     console.log(items)
    return items
 });   

};

Update 1: I've employed callbacks on the ajax request and it is starting to make sense. Thanks for all the good reads. Unfortunately I still can't pass back my array, even after using the .done callback.

Here's the updated code:

$(document).ready(function(){

        loadCrews();

 $('#datetimepicker1').datetimepicker({
     pickTime: false
    });
 $('#datetimepicker2').datetimepicker({
       pickTime: false
    });

 $("#input_form").submit(function(){
     var querystring = $(this).serialize();
             alert(querystring)

     return false;
         });

});

function loadCrews(){
    var url =  //url of service for all crew names
$.getJSON( url)
  .done(function( data ) {
      var crews = [];
    $.each( data, function( key, val ) {
        crews.push(val.UNID);
        })
    console.log(crews)
    return crews

  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
});
};

read this http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Misters, Feb 06 '14 at 22:19

score 0 · Accepted Answer · answered Feb 06 '14 at 22:21

Ajax calls are asynchronous, which means the javascript will continue to execute and not wait for the ajax call to finish first. That means that the crews variable is assigned to a value that doesn't exist yet (as the ajax call isn't finished when the variable is assigned).

You can either use a promise to assign the value when the ajax call is finished, or just assign the value to the crews variable inside the ajax success callback

score 0 · Answer 2 · answered Feb 06 '14 at 22:24

0

You are returning items from inside $.getJSON thus nothing is being returned by loadCrews thus crews = nothing = 'undefined'. to fix this you can move the declaration var item = [] outside of the getJSON function. Goodluck!

answered Feb 06 '14 at 22:24

clancer

613
4
10

@Pierre is also right, you need to wait for the ajax call to be completed before items will be ready to return. – clancer Feb 06 '14 at 22:26

Javascript and JQuery array variables

2 Answers2