Why does the HTML in my JSON response get encoded?

Question

I'm using this blog post as a guide, detailing how to use jQuery with jTemplates to stuff a JSON response into a template.

My problem is, one of the returned fields (named Description) contains HTML, but the HTML brackets are getting encoded to \u003C and \u003e.

Here's the HTML (in the Description field) the server returns:

<a href="/en/Yokota/User/Show/Chad">Chad</a> updated their ad, <a href="/en/Yokota/Ad/Show/100">Validation Test Ad Again</a>, @<a href="/en/Yokota">Yokota</a>

Here's what the JSON response looks like:

[{"TypeOfActivity":"0","Description":"\u003ca href=\"/en/Yokota/User/Show/YokotaTour\"\u003eYokotaTour\u003c/a\u003e posted \u003ca href=\"/en/Yokota/Ad/Show/166\"\u003eOne of the best for sure\u003c/a\u003e for sale @\u003ca href=\"/en/Yokota\"\u003eYokota\u003c/a\u003e","DateHappened":"6/23/2010 12:26:55 AM"}]

Notice the "\u003c", or "\u003e". Those look like unicode escapes, but why is that happening? Here's the jQuery making the call for JSON response:

$.getJSON("<%= Url.Action("List", "Activity") %>",
    function(data){
        $("#aLog").setTemplate($("#templateHolder").html());
        $("#aLog").processTemplate(data);
    });

UPDATE

And this is what the source looks like when the page has loaded complete (View > Page Source in Firefox):

&lt;a href="/en/Yokota/User/Show/Chad"&gt;Chad&lt;/a&gt; updated their ad, &lt;a href="/en/Yokota/Ad/Show/100"&gt;Validation Test Ad Again&lt;/a&gt;, @&lt;a href="/en/Yokota"&gt;Yokota&lt;/a&gt;

Maybe it's because it's nearing 3am, but I'm stumped... any help is greatly appreciated - thank you!

Update 2

public JsonResult List()
{
    IList<ActivityContract> contracts = new List<ActivityContract>();
    var activityList = _db.Activity.ByBaseID(CurrentBase.BaseID).OrderByDescending(a => a.DateHappened);
    foreach (var a in activityList) {
        contracts.Add(new ActivityContract { TypeOfActivity = a.TypeOfActivity.ToString(), Description = a.Description, DateHappened = a.DateHappened.ToString() });
    }
    return Json(contracts, JsonRequestBehavior.AllowGet);
}

How is your action method returning the values? As a JsonResult? Can we see the code? — womp, Jun 22 '10 at 17:39
@womp I added the controller code. Thanks for the quick response. — Chaddeus, Jun 22 '10 at 17:47
@Gumbo - Not sure exactly, it's Microsoft's contribution to the jQuery team, http://jtemplates.tpython.com/ — Chaddeus, Jun 22 '10 at 17:47
jTemplates != MS jQuery Templating library. It's totally different. Seems to me the template engine is doing exactly what you are telling it to do. You are giving it data to display, it's displaying it. If you intend for the data to be HTML, the engine will need to know that. I don't know about jTemplates so I can't say how or if that is a feature. — InfinitiesLoop, Jun 22 '10 at 20:21
@InfinitiesLoop - You're right, my bad... it was linked to by ScottGu and I knew MS was working on a templating engine for jQuery... got mixed up. Thanks. — Chaddeus, Jun 25 '10 at 00:35

score 3 · Accepted Answer · answered Jun 23 '10 at 08:55

Turns out, the problem was with a setting in jTemplates. The setTemplate line needed to be this:

$("#aLog").setTemplate($("#templateHolder").html(), [], {filter_data: false});

Particularly, filter_data had to be set to false. By default jTemplates html encodes. ;(

score 0 · Answer 2 · answered Jun 22 '10 at 17:46

0

make checks like this in the example with the "contentType" in utf8 your example

       $.ajax({
                type:"GET",
                url: "<%= Url.Action("List", "Activity") %>",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                    $("#aLog").setTemplate($("#templateHolder").html());
                    $("#aLog").processTemplate(data);
                }
            });
        });

answered Jun 22 '10 at 17:46

andres descalzo

14,887
13
64
115

That was the original way I wrote it, same problem. – Chaddeus Jun 22 '10 at 17:51
Are you sure the server accepts *application/json* in the request? – Gumbo Jun 22 '10 at 18:05

score 0 · Answer 3 · answered Jun 22 '10 at 18:05

0

The JSONSerializer automatically escapes the "<" and ">" characters with unicode escape sequences.

jQuery should be able to parse these normally. You are using the $.getJSON method, which I thought would automatically evaluate the response as json and unescape it, so I'm a little stumped as to why the final output still contains the escape codes.

If you do:

$("#aLog").processTemplate(eval("(" + data+ ")"));

does that solve the issue?

answered Jun 22 '10 at 18:05

womp

115,835
26
236
269

It didn't, but thanks for the info about the JSONSerializer auto-escaping HTML entities. – Chaddeus Jun 25 '10 at 00:35

Why does the HTML in my JSON response get encoded?

3 Answers3