Getting invalid string [ ] around my JSON outputted from using the JavascriptSerializer class

Question

Currently I'm using the helper methods outlined here to return some JSON from my .ashx: http://weblogs.asp.net/scottgu/archive/2007/10/01/tip-trick-building-a-tojson-extension-method-using-net-3-5.aspx

Problem is, I get [ and ] wrapped around my JSON which is malformed...jQuery cannot pick it up in the callback:

[{"ImageTag":"<img src="http://www.xxx.com/image/473.jpg" alt="">"},{"ImageTag":"<img src="http://www.xxx.com/image/485.jpg" alt="">"}]

So I don't know why I get brackets around this. Here is my implementation:

private void GetImagesJSON(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Charset = Encoding.UTF8.ToString();

    int i = 1;

    List<Product> products = GetTestProducts();
    List<CtImageList> imageList = new List<CtImageList>();

    foreach(Product p in products)
    {
        string imageTag = HttpUtility.HtmlEncode(string.Format(@"<img src=""{0}"" alt="""">", ImageUrl(p.Image, false)));

        imageList.Add(new CtImageList{ImageTag = imageTag});
        i++;
    }

    string jsonString = imageList.ToJSON();
    context.Response.Write(jsonString);
}

Here is the callback function in jQuery which can't parse that because of the starting [ and ]:

function itemLoadCallback(carousel, state) {

    // Only load items if they don't already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    $.getJSON("http://localhost:59396/xxx/CHandler.ashx?action=productsjson",
        function(data) {
            $.each(data.items, function(i, item) {
                alert('got here');
                carousel.add(i, mycarousel_decodeEntities(item.ImageTag));
                if (i == 3) return false;
            });
        });
};

Answer 1

Actually, that should be valid json. The "[" and "]" indicate a list because you called ToJSON on a list of objects. So you have to treat the results as an array. Check out the sample below...

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
       var a = eval("[1,2,3]");
       for(var i in a) { $("#results").append("<p>" + a[i] + "</p>"); } });
  </script>
  <div id="results"></div>

so for your code the function is:

var images = eval('[{"ImageTag":"<img src="http://www.xxx.com/image/473.jpg" alt="">"},{"ImageTag":"<img src="http://www.xxx.com/image/485.jpg" alt="">"}]');
for(var i in images){
$("#mydiv").append(images[i].ImageTag);
}

Answer 2

AFAIK, your response is well-formatted JSON. The brackets are there to tell javascript parses that you are using an array. Passing your JSON to eval() would return you an array with 2 objects.

If your callback is waiting for a single "ImageTag" object, you will get an error.