JavaScript функция массива вернуться неопределенным

Question

Я использую AJAX, чтобы получить данные и сделать их в массив, как показано ниже:

function drawDate(username, date, device, token){ 
    $.ajax({ 
    type: 'GET', 
    url: dsu + "dataPoints/" + getDatapointId(username, date, device), 
    headers: { 
     "Authorization": "Bearer " + token 
    }, 
    success : function(data, device) { 
     var location_events = []; //***** Here is the array variable. 
     if(device == "android" || device == "ios") { 
      rows = data["body"]["episodes"].map(function (epi) { 
       var state = epi["inferred-state"].toLocaleUpperCase(); 
       var start = new Date(epi["start"]); 
       var end = new Date(epi["end"]); 
       var long_lat = epi["location-samples"]; 

       if (state == "STILL") { 
        var longitude_sum = 0; 
        var latitude_sum = 0; 
        long_lat.forEach(function(obj) { 
         longitude_sum += obj['longitude']; 
         latitude_sum += obj['latitude']; 
        }); 
        return [state, start, end, latitude_sum/long_lat.length, longitude_sum/long_lat.length]; 
       } 

      }); 
      //**** I pushed the data into the array. 
      rows.forEach(function(obj){ 
       if (typeof obj !== 'undefined') { 
        location_events.push({ 
         title: 'location', 
         start: moment(obj[1]).format().substring(0, 19), 
         end: moment(obj[2]).format().substring(0, 19), 
         url: "https://maps.googleapis.com/maps/api/staticmap?center="+ obj[3] + "," + obj[4] + "&zoom=15&size=2000x1000&maptype=roadmap&markers=color:red%7Clabel:S%7C" + obj[3] + "," + obj[4] + "&markers=size:mid" 
        }) 
       } 
      }); 
      console.log(location_events); 
      return location_events 

     } 


    }, 
    error: function(data){ 
     console.log('Data did not have any locations.') 
    } 
}); 
} 

Тогда, когда я попытался вызвать эту функцию, он вернулся «неопределенным». Я на самом деле хочу, чтобы поместить этот массив в FullCalendar, как показано ниже:

$(document).ready(function() { 
    var today = moment(); 
    var token = url("#access_token"); 
    $.getJSON(dsu + "oauth/check_token?token=" + token) 
     .done(function(data) { 
      var username = data["user_name"]; 
      var device = 'android'; 
      var date = url("#date")? moment(url("#date")).toDate() : new Date(); 
      var redraw = function(){ 
       var test = drawDate(username, moment(date).format('YYYY-MM-DD'), device, token); 
       console.log(test); //***** Here! I tried to make the return of the function into a variable but it returned "undefined" 
      }; 
      $('#calendar').fullCalendar({ 
       header: '', 
       defaultDate: '2015-08-03', 
       defaultView: 'agendaDay', 
       allDaySlot: false, 
       slotEventOverlap: false, 
       events: test, //******* I want to the array to be rendered here. 
       eventAfterRender: function(event, element, view) { 
       $(element).attr("id", "event_id_" + event.id); 
       } 
      }); 
     }) 
     .fail(function() { 
      console.log("Fail!"); 
     }); 

Я прочитал большинство подобных вопросов, и кажется, что я должен использовать функцию обратного вызова, но я не понимаю, как использовать их.

спасибо! Любая помощь приветствуется!

Answer 1

Проблема в том, что вы выполняете запрос AJAX, который является асинхронным, и вы не можете вернуть эти данные из функции drawDate(). Вам необходимо сделать то, что вам нужно, с данными, полученными с сервера в вашем обратном вызове «success». Примерно:

success : function(data, device) { 
    var location_events = []; //***** Here is the array variable. 
    if(device == "android" || device == "ios") { 
     rows = data["body"]["episodes"].map(function (epi) { 
      var state = epi["inferred-state"].toLocaleUpperCase(); 
      var start = new Date(epi["start"]); 
      var end = new Date(epi["end"]); 
      var long_lat = epi["location-samples"]; 

      if (state == "STILL") { 
       var longitude_sum = 0; 
       var latitude_sum = 0; 
       long_lat.forEach(function(obj) { 
        longitude_sum += obj['longitude']; 
        latitude_sum += obj['latitude']; 
       }); 
       location_events = [state, start, end, latitude_sum/long_lat.length, longitude_sum/long_lat.length]; 
      } 

     }); 
     //**** I pushed the data into the array. 
     rows.forEach(function(obj){ 
      if (typeof obj !== 'undefined') { 
       location_events.push({ 
        title: 'location', 
        start: moment(obj[1]).format().substring(0, 19), 
        end: moment(obj[2]).format().substring(0, 19), 
        url: "https://maps.googleapis.com/maps/api/staticmap?center="+ obj[3] + "," + obj[4] + "&zoom=15&size=2000x1000&maptype=roadmap&markers=color:red%7Clabel:S%7C" + obj[3] + "," + obj[4] + "&markers=size:mid" 
       }) 
      } 
     }); 
     console.log(location_events); 


    } 
    $('#calendar').fullCalendar({ 
      header: '', 
      defaultDate: '2015-08-03', 
      defaultView: 'agendaDay', 
      allDaySlot: false, 
      slotEventOverlap: false, 
      events: location_events, 
      eventAfterRender: function(event, element, view) { 
      $(element).attr("id", "event_id_" + event.id); 
      } 
     }); 

}