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":"&lt;img src=&quot;http://www.xxx.com/image/473.jpg&quot; alt=&quot;&quot;&gt;"},{"ImageTag":"&lt;img src=&quot;http://www.xxx.com/image/485.jpg&quot; alt=&quot;&quot;&gt;"}]

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

note that in the blog post you linked to, his JSON has "[" array brackets around the serialized version of a list. This is expected behaviour. — Tim Hoolihan
– Tim Hoolihan, Commented Jun 29, 2009 at 18:07

wtaniguchi · Accepted Answer · 2009-06-29 16:35:27Z

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.

answered Jun 29, 2009 at 16:35

wtaniguchi

1,32415 silver badges23 bronze badges

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

8 Comments

PositiveGuy Over a year ago

check this out then if you could: groups.google.com/group/jquery-en/browse_thread/thread/… if this is valid JSON then why does jQuery seem not to be able to parse it into a data object?

Tim Hoolihan Over a year ago

look at my post above, you have to iterate through the array of the items

PositiveGuy Over a year ago

And I do that in the jQuery getJSON. The problem is, jQuery can't parse my JSON first in order to shove it into that object "data". It's got a problem with the [ ]. [ ] are fine when inside a key/value pair but not ok to start JSON with I don't think.

PositiveGuy Over a year ago

jquery automatically passes it to eval(). The problem is I can't even get jQuery do to this because jQuery has a problem with my malformed JSON here. I can then use $.each in jQuery to iterate through the object that jQuery creates when parsing my JSON but again, my JSON is malformed.

Tim Hoolihan Over a year ago

use your own eval directly, as in the sample in my post. I used it with your data and it works.

|

Tim Hoolihan · Accepted Answer · 2009-06-29 16:47:20Z

0

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":"&lt;img src=&quot;http://www.xxx.com/image/473.jpg&quot; alt=&quot;&quot;&gt;"},{"ImageTag":"&lt;img src=&quot;http://www.xxx.com/image/485.jpg&quot; alt=&quot;&quot;&gt;"}]');
for(var i in images){
$("#mydiv").append(images[i].ImageTag);
}

edited Jun 29, 2009 at 16:47

answered Jun 29, 2009 at 16:34

Tim Hoolihan

12.4k3 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related