unexpected token u in json at position 0 when pars

Question

it is clear that I am one of many with this issue, I've been googling for the past hour or so but I cannot seem to fix my issue.

I am trying to fetch data from my controller using AJAX to put into the jQuery FullCalendar, now that I am fairly confident about my controller, I still get an error saying:

unexpected token U in json at position 0

so there has to be something wrong.

here's the script I use to get data from my database in my Controller:

[HttpPost, ActionName("List")]
    [WebMethod(EnableSession = true)]
    public ActionResult List()
    {
        temphrmEntities db = new temphrmEntities();
        List<medewerker_melding> eventList = db.medewerker_melding.ToList();

        // Select events and return datetime as sortable XML Schema style.
        var events = from ev in eventList
                     select new
                     {
                         id = ev.ID,
                         title = ev.medewerker.voorvoegsel + ". " + ev.medewerker.achternaam,
                         desc = ev.Omschrijving,
                         start = ev.datum_van.ToString(),
                         end = ev.datum_tot.ToString(),
                         user = ev.medewerkerID,
                         melding = ev.meldingID
                     };

        // Serialize to JSON string.
        JavaScriptSerializer jss = new JavaScriptSerializer();
        String json = jss.Serialize(events);
        Debug.WriteLine("Json:"+json);
        return Json(json, JsonRequestBehavior.AllowGet);

    }

This is the Json format that it returns:

[  
  {  
  "id":1,
  "title":"K. Keesen",
  "desc":"zelf ziek gemeld",
  "start":"2-2-2018 13:00:00",
  "end":"5-2-2018 13:00:00",
  "user":15,
  "melding":1
  },
  {  
  "id":3,
  "title":"K. Keesen",
  "desc":null,
  "start":"2-2-2018 13:00:00",
  "end":"5-2-2019 13:00:00",
  "user":15,
  "melding":1
  },
  {  
  "id":5,
  "title":"K. Keesen",
  "desc":null,
  "start":"14-2-2018 08:30:00",
  "end":"",
  "user":15,
  "melding":1
  },
  {  
  "id":6,
  "title":"K. Keesen",
  "desc":"srgsrgrgdrgdrgd",
  "start":"7-2-2018 08:30:00",
  "end":"",
  "user":38,
  "melding":13
  },
  {  
  "id":7,
  "title":"T. test",
  "desc":null,
  "start":"14-2-2018 08:30:00",
  "end":"21-2-2018 17:00:00",
  "user":63,
  "melding":10
  },
  {  
  "id":8,
  "title":"K. Keesen",
  "desc":null,
  "start":"16-2-2018 08:30:00",
  "end":"23-2-2018 17:00:00",
  "user":28,
  "melding":14
  },
  {  
  "id":9,
  "title":"K. Keesen",
  "desc":null,
  "start":"14-2-2018 08:30:00",
  "end":"",
  "user":33,
  "melding":12
  },
  {  
  "id":10,
  "title":"K. Keesen",
  "desc":"fvghbj",
  "start":"22-2-2018 08:30:00",
  "end":"",
  "user":15,
  "melding":11
  },
  {  
  "id":11,
  "title":"K. Keesen",
  "desc":null,
  "start":"15-2-2018 08:30:00",
  "end":"22-2-2018 17:00:00",
  "user":15,
  "melding":1
  },
  {  
  "id":12,
  "title":"K. Keesen",
  "desc":null,
  "start":"23-2-2018 08:30:00",
  "end":"",
  "user":15,
  "melding":1
  },
  {  
  "id":13,
  "title":"K. Keesen",
  "desc":"Test take #25",
  "start":"7-2-2018 08:30:00",
  "end":"23-2-2018 17:00:00",
  "user":15,
  "melding":1
  },
  {  
  "id":14,
  "title":"K. Keesen",
  "desc":null,
  "start":"8-2-2018 08:30:00",
  "end":"",
  "user":15,
  "melding":1
  }
]

I checked if it was valid using Json Formatter & Validation

and finally my function with ajax: (I'm not very good at ajax so copy pasted it)

function GenerateCalendar() {
            $("#calendar").fullCalendar({
                theme: true,
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "month,agendaWeek,agendaDay"
                },

                defaultView: 'month',
                selectable: true,
                selectHelper: true,
                editable: true,
                eventLimit: true,
                events: function (start, end, callback) {
                    $.ajax({
                        type: "POST",    //WebMethods will not allow GET
                        url: '@Url.Action("List/medewerker_melding")',   //url of a webmethod - example below
                        //data: "",  //this is what I use to pass who's calendar it is
                        //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (doc) {
                            var events = [];   //javascript event object created here
                            var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
                            $(obj.event).each(function () { //yours is obj.calevent
                                events.push({
                                    title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                                    start: $(this).attr('start'), // will be parsed into DateTime object
                                    end: $(this).attr('end')
                                });
                            });
                            callback(events);
                        }
                    });
                },

                select: function (start, end) {
                    var start = moment(start).format();
                    var end = moment(end).format();
                    $('#startDate').val(start);
                    $('#endDate').val(end);
                    $('#eventModal').modal();
                    if ($('#eventModal')) {
                        $(".meldingForm").submit(function () {
                            //insertEvents();
                        });

                        $('#calendar').fullCalendar('renderEvent', events, true);
                    }
                    $('#calendar').fullCalendar('unselect');
                },
            });
        }

Thanks!

Answer 1

You don't need this line:

var obj = $.parseJSON(doc.d);

When you tell jQuery that the data type to expect is json (dataType: "json") it'll try to parse it automatically for you or fail if it's not a valid JSON object (see jQuery.getJSON() for more details).

Try this instead:

var obj = doc.d;

---

Update:

d is, indeed, undefined. Try changing your code to this:

var events = [];   //javascript event object created here

$.each( doc, function( index, obj ) {
    events.push({
        title: obj.title,
        start: obj.start,
        end: obj.end
    });
});

callback(events);

Answer 2

You say you've copy'd the AJAX, double check the line within it:

var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"

and check that the JSON is stored in the return object as a variable d from your server.

Try inserting console.log(doc) before that line and check your browsers conosle to check what the server actually returns.

Update

Replace var obj = $.parseJSON(doc.d); with var obj = doc as the ajax method parses automatically.