Question

I am trying to use the jQuery Datepicker to display specific info from JSON file dependant on the date selected by a user. JSON file will contain an array with events for particular city and date. My problem is that I don’t know how to use selected date to loop the JSON file.

My code is:

 <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 file, 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"
        }
    ]
}

Probably it is very simple and obvious but I can’t handle this problem.
Any help would be appreciated.

Answer 1

The object you’re getting back can be treated as a map or associative array. With that in mind, the key for each item in the map looks like it’s a date formatted yyyymd. Since you know what date was selected, you can build the correct key based on the parts of that date.

$(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);
                    });
                });
            }
         });
});

I’m not sure exactly how you want to build the HTML up, but with the above, entry should be a list of events occurring on the selected date.