Question

timeline.js + MVC + Ajax + JSON

hello,

I have problem while converting string to Json Object

I have to display timeline on my webpage, I have used Timeline.js for the same, I am able to run the timeline using static data that is as following

Static Data

// Create a JSON data table
data = [
{
        'start': new Date(2010, 7, 23),
    'content': 'Conversation'
},
{
    'start': new Date(2010, 7, 23),
    'content': 'New Conversation'
},
{
    'start': new Date(2010, 7, 23),
    'content': 'Very New Conversation'
}

now when I do

alert(data);

it gives me

[object Object],[object Object],[object Object]

but now I have to display a data from the DB, so I am calling the following function on controller

GetTimeLine method on controller

public JsonResult GetTimeline()
{
      JsonResult jr = new JsonResult();
      var objtimeline = objEntities.Timelines.Where(tl => tl.StudentID == Sessions.StudentID).ToList().AsQueryable();
      String newstr = "[";
      foreach(var tml in objtimeline)
      {
            DateTime date1 = Convert.ToDateTime(tml.CalculatedDate);
            newstr += "{'start': new  Date("+date1.Year+","+date1.Month+","+date1.Day+","+date1.Hour+","+date1.Minute+","+date1.Second+"),'content':'"+tml.Description+"'},";
      }
      newstr = newstr.TrimEnd(',');
      newstr += "];";
      jr.Data = newstr;
      jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
      return jr;
}

function to call controller method

jQuery.ajax({
    type: "POST",
    url: "@Url.Content("~/Student/GetTimeline")",
    success: function (result) {
        data = result;
    },
});
alert(data);

it gives me the following alert

[{'start': new Date(2012,2,11,0,0,0),'content':'Parents meeting'},{'start': new Date(2012,2,15,0,0,0),'content':'Exam Meeting'}];

so the problem is with conversion of string to Json Object,

How can I convert string returned from controller to Json Object on my view…

Answer 1

You’re working too hard. Let the framework do it for you.

public JsonResult GetTimeline()
{
     var timeline = objEntities.TimeLines.Where( tl => tl.StudentID == Sessions.StudentID )
                                         .ToList() //required due to Convert call
                                         .Select( tl => new
                                          {
                                               start = Convert.ToDateTime(tl.CalculatedDate),
                                               content = tl.Description
                                          });
     return Json( timeline, JsonRequestBehavior.AllowGet );
}

Then either use getJSON (since you specifically allow gets) or specify dataType: 'json' in your request.

$.getJSON( '@Url.Action("gettimeline","student")', function(data) {
     alert(data);
});