How to convert string to JSON Object

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...

I think you need to take another look at JSON objects and the syntax for them. If it's wrapped in [ and ] in Javascript, it's an array, not an object (JSON or otherwise). — Anthony Grist
– Anthony Grist, Commented Apr 14, 2012 at 13:13
@AnthonyGrist: Having an array as the top-level object is valid JSON. (However, the quoted string is not, not with those single quotes and that new Date(...) in there.) — T.J. Crowder
– T.J. Crowder, Commented Apr 14, 2012 at 13:14
@T.J.Crowder It would appear I'm the one who needs to take another look at the syntax, then! — Anthony Grist
– Anthony Grist, Commented Apr 14, 2012 at 13:20
@IT ppl: there's no such thing as a JSON object (well, there's the JSON object in some browsers, with the parseJSON and stringify methods, but that is decidedly not what you're asking about). There are JS objects, object literals, and JSON. The result of the AJAX request is a JSON string. — outis
– outis, Commented Apr 14, 2012 at 13:21
@AnthonyGrist: Yeah, well, json.org is a bit unclear about it. The RFC is more explicit, saying specifically that the top level can be an object or an array. Interestingly, the ECMAScript5 specification goes further and says that it can be any JSON value (so that would include just a string or number on its own). — T.J. Crowder
– T.J. Crowder, Commented Apr 14, 2012 at 13:25

tvanfosson · Accepted Answer · 2012-04-14 13:43:16Z

4

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

edited Apr 14, 2012 at 13:43

answered Apr 14, 2012 at 13:25

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IT ppl Over a year ago

gettimeline method gives the following error - {"LINQ to Entities does not recognize the method 'System.DateTime ToDateTime(System.Object)' method, and this method cannot be translated into a store expression."}

tvanfosson Over a year ago

@ITppl I noticed that might happened and updated, but you must not have seen my change. There's no translation for the Convert call and so you need to load the objects in memory before converting. If CalculatedDate is already a DateTime, though, you don't need to do this. Please tell me that you ARE storing it as an actual DateTime in the DB, not as a string. If so, just remove both the ToList() and the conversion.

IT ppl Over a year ago

it's working fine at controller side, but it returns this [0] = { start = {2/11/2012 12:00:00 AM}, content = "Exam meeting" } but I want start = (2012,11,2,0,0,0) as it was used in timeline.js, how to do that

tvanfosson Over a year ago

@ITppl I'm not familiar with timeline.js, but it should be giving you an actual date object on the client. What you're seeing is the conversion of the date object to its string representation. That should be equivalent to what you were doing with your static example.

tvanfosson Over a year ago

@ITppl I should also note that getJSON is going to do the conversion from string to object for you. I suppose you could artificially construct the "date" as date constructor string, but by the time it gets to the callback it will be converted to an object anyway. If timeline needs it as a string in a certain format, then format it as that string (without the constructor) for timeline before sending to the client.

T.J. Crowder · Accepted Answer · 2012-04-14 13:17:41Z

1

What you have the server returning is not valid JSON. Or give your server-side code, it may be valid JSON which just defines a string rather than an object graph. In JSON:

All object keys must be in double quotes, not single quotes.
All strings must be in double quotes, not single quotes.
new Date(...) is not valid (JSON doesn't have any concept of dates).

I believe you want to build up an array (not a string) and assign that to jr.Data, and then let the JsonResult object handle the serialization for you (but I haven't done this in ASP.net MVC).

Once you have the server returning valid JSON, ensure that it's returning it with the correct Content-Type header (the value is application/json). When you do, jQuery will see that it's JSON and deserialize it into an object graph for you. If you can't or don't want to make your server return valid JSON, add dataType: 'json' to the ajax call to force it.

answered Apr 14, 2012 at 13:17

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

IT ppl Over a year ago

yup i want to return the array from the controller that can be used by the timeline.js, what is other way ?

T.J. Crowder Over a year ago

@ITppl: As I said: "I believe you want to build up an array (not a string) and assign that to jr.Data, and then let the JsonResult object handle the serialization for you"

Collectives™ on Stack Overflow

How to convert string to JSON Object

Static Data

GetTimeLine method on controller

function to call controller method

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Static Data

GetTimeLine method on controller

function to call controller method

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related