带有 JSON 文件的 Jquery Datepicker

Question

我正在尝试使用 jQuery Datepicker 根据用户选择的日期显示来自 JSON 文件的特定信息。 JSON 文件将包含一个数组，其中包含特定城市和日期的事件。我的问题是我不知道如何使用选定的日期来循环 JSON 文件。

我的代码是：

 <script type="text/javascript">
    $(document).ready(function(){
    $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            inline: true,
            minDate: new Date(2012, 1 - 1, 1),
            maxDate:new Date(2012, 12 - 1, 31),
            altField: '#datepicker_value',
            onSelect: function(){
                var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                var year1 = $("#datepicker").datepicker('getDate').getFullYear();
         fullDate = year1 + "" + month1 + "" + day1;
    var proba = "<center><p>:<b>  "+fullDate+"</b></p></center>";
       var output = $.getJSON("example.json",  function(data){

    $.each(data, function(index,entry){  ??? 
    $('#page_output').append(html);
    });
    });

                $('#page_output').html(proba, output);

            }
         });
    });

    </script>

JSON 文件，example.json：

{
    "2012215":[{
            "Something1":"Blablabla",
            "Title1":"Blabla",
            "Description":["Blablabla",
                "Blablablabl"
            ],
            "Something2":"Blablabla",
            "Title2":"Blablabla"
        }
    ],
    "201231":[{
            "Something3":"Blaasdasdblabla",
            "Title3":"Blabla",
            "Description":["Blablabla",
                "Blablablabl"
            ],
            "Something4":"Blablabla",
            "Title4":"Blablabla"
        }
    ]
}

可能它非常简单明了，但我无法处理这个问题。 任何帮助将不胜感激。

Answer 1

您返回的对象可以被视为map 或关联数组。考虑到这一点，地图中每个项目的 key 看起来就像是格式化为 yyyymd 的日期。由于您知道选择了哪个日期，因此您可以根据该日期的各个部分构建正确的密钥。

$(document).ready(function(){
    $('#datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            inline: true,
            minDate: new Date(2012, 1 - 1, 1),
            maxDate:new Date(2012, 12 - 1, 31),
            altField: '#datepicker_value',
            onSelect: function(){
                var day1 = $("#datepicker").datepicker('getDate').getDate();                 
                var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
                var year1 = $("#datepicker").datepicker('getDate').getFullYear();
                var fullDate = year1 + "" + month1 + "" + day1;
                var proba = "<center><p>:<b>  "+fullDate+"</b></p></center>";
                $.getJSON("example.json",  function (data){
                    $.each(data["" + year1 + month1 + day1], function(index, entry)
                        /* Process the event and build HTML */
                        $('#page_output').append(html);
                    });
                });
            }
         });
});

我不确定您希望如何构建 HTML，但根据上述情况，entry 应该是所选日期发生的事件列表。