getJson returns undefined value instead of Json object

Question

I am trying to use simple getJson call to get Json object from server.

On server side everything looks good. Json is created and returned:

But on the front-end my object is not mapped to returned Json from server. It is undefined in first call and that value and then it goes one more time through getJson and returns real object.

This is my code:

btnSaveNewMeeting.onclick = function () {
    var vm = {
        'Title': $('#eventTitle').val(),
        'StartAt': $('#startdatepicker').val() + ' ' + $('#starttimepicker').val(),
        'EndAt': $('#enddatepicker').val() + ' ' + $('#endtimepicker').val()
    }

    var meetings = GetAllScheduledMeetings();

    if (CheckIfMeetingsAreOverlapping(vm.StartAt, vm.EndAt, meetings)) {
        addNewMeetingModal.style.display = "none";

        $.ajax({
            type: 'POST',
            url: "/Meeting/Create",
            data: vm,
            success: function () {
                $('#calendar').fullCalendar('refetchEvents');
            }
        });

        ClearPopupFormValues();
    }
}

So I want to get value from GetAllScheduledMeetings(); and put it in meetings object.

var meetings = GetAllScheduledMeetings();

function GetAllScheduledMeetings() {
    $.getJSON("/Meeting/GetAllScheduledMeetings", function (result) {
        return result;
    });
}

So GetAllScheduledMeetings() should only make a call to server and return result. But that doesn't happened.

When I debug in console of a browser what is happening is this: 1. on button click GetAllScheduledMeetings() gets invoked. 2. getJson makes a call to server and json object is created there and returned. 3. it goes back to front-end but skips whole return result; part and returns undefine value to var meeting = GetAllScheduledMeetings(); 4. I get few exceptions because meeting is undefine 5. GetAllScheduledMeetings() gets called again for some reason, after all of this has happened and in this call result gets real values from server.

Does someone knows why is this happening? Why two calls are made and why in the first call I do not get data from server?

Answer 1

GetAllScheduledMeetings never returns anything (so, returns undefined) and "is async", so, at the moment of execution, when using meetings, there is a very high probabilty for the variable to be undefined. You'll need to recode GetAllScheduledMeetings to pass you all "if block" as a callback or use any other way to work with async code (Promises for instance).

function GetAllScheduledMeetings() {
    $.getJSON("/Meeting/GetAllScheduledMeetings", function (result) { // This anonymous function is called asynchronously and returns result *in the blue*
        return result;
    });
    // GetAllScheduledMeetings doesn't specify a return value so it's retVal is undefined
}

Answer 2

SOLUTION:

Since $.getJSON or $.ajax calls are asynchronous by default all you need to do is make them synchronous by adding: async: false to call definition.