이 JavaScript/JQuery JSON 구문 분석 코드가 작동하지 않는 이유는 무엇입니까?

Question

여기 내 jQuery 코드가 있습니다. JSON이 반환 한 것을 구문 분석해야합니다 이것 PHP 스크립트. PHP는 작동하는 것으로 알려져 있습니다. 또한 날짜 리터럴을 JavaScript 날짜 개체로 변환해야합니다. 그러나 오류가 발생합니다 dates.length. 누구든지 코드에 무엇이 잘못되었는지 알 수 있습니까?

if($("#calendar").length)
{
    var dates;
    $.post("/dates/jsondates.php",function(data)
    {
        for(var i=0; i<data.length; i++)
        {
            data[i].start = new Date(data[i].start);
            data[i].end = new Date(data[i].end);
        }
        dates = data;
    }, "json");

    $("#calendar").datepicker(
    {
        beforeShowDay: function(date)
        {
            for(var i=0; i<dates.length; i++)
            {
                if(dates[i].start<date<dates[i].end)
                {
                    return new Array(0, "booked", dates[i].comment);
                }
            }
            return new Array(1);
        }
    });
}

Answer 1

AJAX 호출이 완료되기 전에 DatePicker 코드가 (잠재적으로) 실행됩니다. 최소한 코드의 DatePicker 부분을 $ .post 콜백으로 옮기십시오.

if ($("#calendar").length)
{
    var dates;
    $.post("/dates/jsondates.php",function(data)
    {
        for(var i=0; i<data.length; i++)
        {
                data[i].start = new Date(data[i].start);
                data[i].end = new Date(data[i].end);
        }
        dates = data;

        $("#calendar").datepicker(
        {
            beforeShowDay: function(date)
            {
                    for(var i=0; i<dates.length; i++)
                    {
                            if(dates[i].start<date<dates[i].end)
                            {
                                    return new Array(0, "booked", dates[i].comment);
                            }
                    }
                    return new Array(1);
            }
        });
    }, "json");

}

편집 : 제쳐두고, 그것이 나라면, 아마도 날짜 데이터를 가져 와서 콜백을 공급하기 위해 일종의 발신자 함수로 나뉘었을 것입니다. 예 :-

function __callDateController(callback)
{
    $.post("/dates/jsondates.php",function(data)
    {
        for(var i=0; i<data.length; i++)
        {
            data[i].start = new Date(data[i].start);
            data[i].end = new Date(data[i].end);
        }

        if (callback !== undefined) {
            callback(data);
        }
    }, "json");
}

그런 다음 데이트 피커가 다루기위한 콜백을 공급하십시오.

__callDateController(function(dates)
{
    $("#calendar").datepicker(
        {
            beforeShowDay: function(date)
            {
                for(var i=0; i<dates.length; i++)
                {
                    if(dates[i].start<date<dates[i].end)
                    {
                        return new Array(0, "booked", dates[i].comment);
                    }
                }
                return new Array(1);
            }
        });
    });

Answer 2

문제는 AJAX가 처리되기 전에 Calendar DatePicker 코드가 실행되고 있다는 것입니다.

DatePicker 코드는 $ .post 콜백 함수, For Loop 아래 및 라인 아래에 들어가야합니다. dates = data;