JSON escaped characters in jqGrid

Question

I'm sorry.. I know I'm going to get accused of asking a question which has already been asked many times before, but I have desperately searched, Googled and tried all kinds of suggestions, but nothing has worked for me.

I have a service returning some JSON data with an apostrophe in it. So "Mike's example record" gets returned like this:

{
    "Results": [
    {
        "ID": 139,
        "Name": "Mike\u0027s example record",
        "CedentName": "Mikes Business Partner"
    }],
    "Success": "1"
}

What I want to know, is how to get jqGrid to convert this \u0027 code back into an apostrophe.

enter image description here

I know, I know, this must be an obvious setting, but I have searched, Googled, tried adding functions to the jqGrid datatype attribute, and so on, but nothing has worked.

Here's the code I use to load the JSON data, and populate the jqGrid:

$("#tblCustomers").jqGrid({
                 url: '/JSON/GetCustomers.aspx',
                 contentType: "application/json; charset=utf-8",
                 datatype: "json",
                 viewrecords: true,
                 loadonce: true,
                 jsonReader: {
                    root: "Results",   //arry containing actual data 
                    id: "ID",          //index of the column with the PK in it 
                    repeatitems: false
                 },
                 . . .
                 . . .
                 autoencode: true,
                 caption: ""
             });

Another question: out of interest, I added another record with speechmarks in it.

Bizarrely, the JavaScriptSerializer() function produced invalid JSON, and then, nothing got displayed in the jqGrid !!

string JSON = new JavaScriptSerializer().Serialize(listOfRecords).ToString();

produced the following invalid JSON string.

Notice how it hasn't encoded the speechmark into \u0022 :

{
    "Results": [
        {
            "ID": 140,
            "Name": "Mikes \\"Speechmark test\\" RP",
            "CedentName": "Mikes Cedent"
        },

I can't be the only person noticing this quirk, can I...?

A little while later..

After reading this article and seeing the way JavaScriptSerializer() formats dates, using Microsoft's own unsupported format:

StartDate: "\/Date(1401573600000)\/",

..I realised that JavaScriptSerializer() is pretty nasty, and replaced it with JSON.Net.

Strangely, this class also fails miserably when it comes to serializing values containing speechmarks, and happily creates invalid JSON strings (it has the same incorrect format as shown above, with a speechmark left in the middle of the field value).

However, it does, at least leave apostrophes alone, so I can view my data in jqGrid without the need for formatters.

Mike Gledhill · Answer 1 · 2014-06-06T11:38:15.480

Here's the closest thing I've found to an answer.

You can apply a formatter to each cell in the grid, to force it to parse the JSON value, which will convert \u0027 escape codes back into apostrophes.

function formatCell(cellValue, options, rowdata, action) {
    return JSON.parse("\"" + cellValue + "\"");
}

then add this formatter to each column in your jqGrid:

$("#tblCustomers").jqGrid({
                 url: '/JSON/GetCustomers.aspx',
                 contentType: "application/json; charset=utf-8",
                 datatype: "json",
                 colModel: [
                     { name: "ID", width: 70, align: "center", formatter: formatCell },
                     { name: "Name", search: true, width: 290, formatter: formatCell },
                     { name: "CedentName", search: true, width: 290, formatter: formatCell }
                 ],
                 . . .

This does work, and I finally get to see the apostrophe in my jqGrid:

enter image description here

But there must be a cleaner way of doing this...?

JSON escaped characters in jqGrid

1 Answers1