What is the difference between these two ways of returning a JSON object?

Question

I'm playing around with the jQuery Week Calendar and am trying to get this to work, but I can't figure out why this is throwing an error.

The calendar has a method that returns a list of events to populate itself with.

The method (which uses preset events for demo purposes) looks like this:

function getEventData() {
      var year = new Date().getFullYear();
      var month = new Date().getMonth();
      var day = new Date().getDate();

      return {
         events : [
            {
               "id":1,
               "start": new Date(year, month, day, 12),
               "end": new Date(year, month, day, 13, 30),
               "title":"Lunch with Mike"
            },
            ...
            {
               "id":6,
               "start": new Date(year, month, day, 10),
               "end": new Date(year, month, day, 11),
               "title":"I am read-only",
               readOnly : true
            }
         ]
      };
   }

I changed it so that it used a jQuery GET to another page that would return a list of real dates. For testing, I kept the same test data just to see if the post was being done properly.

The method will call the page, and it will return this in the responseText property.

{ 
  events : [
        {
           'id':1,
           'start': new Date(2010, 2, 22, 12),
           'end': new Date(2010, 2, 22, 13, 30),
           'title':'Lunch with Mike'
        },
        ...
        {
           'id':6,
           'start': new Date(2010, 2, 28, 10),
           'end': new Date(2010, 2, 28, 11),
           'title':'I am read-only',
           readOnly : true
        }
     ] 
 }

Is there a difference between the two methods that I'm missing? The two objects look exactly the same to me, except the second one uses ' instead of " since it's being written through C#, and it doesn't use the year/month/day variables.

The problem is that the second method throws an error saying that "G is undefined", is there any reason jQuery wouldn't like the JSON object that I'm returning?

EDIT: I think I found the source of the error. Inside one of the methods there is an if statement like this:

 if (typeof options.data == 'string') {
        if (options.loading) options.loading(true);
        var jsonOptions = {};
        jsonOptions[options.startParam || 'start'] = Math.round(weekStartDate.getTime() / 1000);
        jsonOptions[options.endParam || 'end'] = Math.round(weekEndDate.getTime() / 1000);
        $.getJSON(options.data, jsonOptions, function(data) {
           self._renderEvents(data, $weekDayColumns);
           if (options.loading) options.loading(false);
        });
     }
     else if ($.isFunction(options.data)) {
        options.data(weekStartDate, weekEndDate,
              function(data) {
                 self._renderEvents(data, $weekDayColumns);
              });
     }

When just outputting the JSON object in getEventData() (the first way) it hit the else statement because it's recognized as a function (I'm guessing), but when I do the ajax GET, it's being considered a string and going into the if.

Is there anyway to get this recognized as a function? I tried wrapping the return in braces, changing the dataType to script and using eval() to cast the result as a function, but none of that seemed to work.

Answer 1

Have you tried enclosing events in quotes as well?

'events': [ ....

Answer 2

Put your response text into JSON validator and see, where the problem lies.

Also note, that outputting new Date(2010, 2, 28, 10) directly into text is considered bad practice, rather use real values and then parse them on client side with JS. (I believe this is the most obvious error, as long as you don't use eval to parse your JSON string :))

since jQuery 1.4.0, the library is very strict, on how JSON is formatted (your json text misses quotes for keys)

Answer 3

After searching through Google I came across the jQuery Week Calendar Google Group and this discussion had the exact same problem I was having.

I think the main problem was the improper formatting of DateTimes. Returning the events JSON object directly converted the date properly, but my ajax call was returning new Date(2010, 02, 23, 12) as the times. It caused it to fail silently. Changing the datetimes to something like 2010-02-23T12:15:00.000+10:00 seems to have fixed it.

However that user does appear to be incorrect about the events : [ breaking the JSON. I left it in my ajax call and it still works fine.