javascript - Invalid format with Json when converting DataTable with Json.Net

Question

I'm trying to convert DataTable to JSON using Newtonsoft.JSON but found that the output is not what ExtJS grid and chart would expect.

My code is

string output = JsonConvert.SerializeObject(dt, Formatting.Indented,
                            new JsonSerializerSettings
                            {
                                ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                            });

and this returns Json string as

"[{"DAYDATE":"2012-05-22T00:15:00","SERIES1":3.65}]"

If I remove '' and start and end double quotes it works fine with ExtJS.

I also tried changing date format to more JSON'y

string javascriptJson = JsonConvert.SerializeObject(entry, new JavaScriptDateTimeConverter());

results in

"[{"DAYDATE":new Date(1337642100000),"SERIES1":3.65}]"

still no luck

Answer 1

It looks like your JSON is getting double serialized. Although you did not show your full controller code, I'm guessing that you are doing something like this:

    public ActionResult GetDataTable()
    {
        // (... code to build data table omitted for brevity ...)

        // Serialize data table using Json.Net to avoid circular reference error
        string output = JsonConvert.SerializeObject(dt,
            new JsonSerializerSettings
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                Formatting = Formatting.Indented
            });

        return Json(output);
    }

The Json() method also invokes serialization. Normally, in an MVC controller, you would just use the Json() method to serialize your return object, and not use Json.Net separately. I can see you are using Json.Net here to try to get around the exception that happens due to circular references when you try to serialize a data table. If you are going to serialize manually, then you need to return the data in a way that it will not get serialized a second time. You can do this using the Content() method instead. Try it like this:

public ActionResult GetDataTable()
{
    // Build data table
    DataTable dt = new DataTable();
    dt.Columns.Add("DAYDATE", typeof(DateTime));
    dt.Columns.Add("SERIES1", typeof(double));
    dt.Rows.Add(new DateTime(2012, 5, 22, 0, 15, 0), 3.65);

    // Serialize data table using Json.Net to avoid circular reference error
    string output = JsonConvert.SerializeObject(dt,
        new JsonSerializerSettings
        {
            ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
            Formatting = Formatting.Indented
        });

    // Output is already serialized; return it as is (with the appropriate media type)
    return Content(output, "application/json");
}

In my testing, the above will produce the following output, which I think is what you are looking for:

[ { "DAYDATE": "2012-05-22T00:15:00", "SERIES1": 3.65 } ]