Jquery $.map function giving error

Question

I have the following code to map events to FullCalendar

 events: function(start, end, callback)
            {
                $.ajax(
                {
                    type: 'POST',
                    dataType: 'json',
                    url: "Calendar.aspx/GetEvents",
                    contentType: 'application/json; charset=utf-8',
                    cache: false,
                    success: function (response) {
                        var events = [];

                         $.map(response.d, function (item) {
                            var event = new Object();
                            event.id = item.EventID;
                            event.start = new Date(item.StartDate);
                            event.end = new Date(item.EndDate);
                            event.title = item.EventName;
                            return event;
                            events.push(event);
                         })
                         callback(events);
                    },

                    error: function (err) {
                       alert('Error');
                    }
                });
             },

The Calendar.aspx/GetEvents function returns the following data successfully:

"[{"EventID":1,"EventName":"EventName 1","StartDate":"04-04-2014","EndDate":"04-06-2014"},{"EventID":2,"EventName":"EventName 2","StartDate":"04-08-2014","EndDate":"04-09-2014"},{"EventID":3,"EventName":"EventName 3","StartDate":"04-14-2014","EndDate":"04-15-2014"},{"EventID":4,"EventName":"EventName 4","StartDate":"04-26-2014","EndDate":"04-29-2014"}]"

I want to iterate through this data and assign it to the calendar.

My above $map function gives me the following error:

Cannot use in operator to search for 352 in [{"EventID":1,"EventName":"EventName 1","StartDate":"04-04-2014","EndDate

How can I do this??

Answer 1

You're using $.map incorrectly. The point of it is that it creates an Array, so there's no need to create one before the loop and .push() into it.

You should keep the return statement, remove the .push, and set the return value of $.map to the events variable.

success: function (response) {
    var events = $.map(response.d, function (item) {
        var event = new Object();
        event.id = item.EventID;
        event.start = new Date(item.StartDate);
        event.end = new Date(item.EndDate);
        event.title = item.EventName;
        return event;
     });
     callback(events);
},

---

However, object literal syntax is nicer.

success: function (response) {
    var events = $.map(response.d, function (item) {
        return {
            id: item.EventID,
            start: new Date(item.StartDate),
            end: new Date(item.EndDate),
            title: item.EventName,
        };
     });
     callback(events);
},

---

The error message shown in your question doesn't seem to make sense for the code provided.