How can I convert this Json array to a format readable by JQuery?

Question

Bit of a vague question, but I'm unsure how I can this to work. Firebug says the Json object (array?) from my ajax request looks like:

{
"jsonResult":
"[
   {\"OrderInList\":1},
   {\"OrderInList\":2}
]"
}

This is retrieved through through a $.getJSON ajax request:

    $.getJSON("/Json/GetOrderSelectList?parentCategoryId=" + postData, testData, function (jsonResult) {
        $('#orderInList option').remove();

        var map = {
            "TestKey1": "TestValue1",
            "TestKey2": "TestValue2"
        };

        $.each(jsonResult, function (key, value) {
            $("#orderInList").append($("<option value=" + key + ">" + value + "</option>")
            );
        });

If I replace $.each(jsonResult) with $.each(map) the select list populates correctly. Otherwise my select list just says 'undefined'.

I serialize the Json in this Action in my MVC Controller:

    public JsonResult GetOrderSelectList(int parentCategoryId)
    {
        var result = Session
            .QueryOver<Category>()
            .Where(x => x.Parent.Id == parentCategoryId)
            .OrderBy(x => x.OrderInList).Asc
           .List();

        var toSerialize =
            result.Select(r => new {r.OrderInList});

        var jsonResult = JsonConvert.SerializeObject(toSerialize);                             
        return Json(new
                        { jsonResult,
                        }, JsonRequestBehavior.AllowGet);

    }

So I think the problem might be the format of Json the Action is responding with? Any help appreciated!

Edit for answer

Both of the answers below helped me. I couldn't seem to strongly type the variable jsonResult so thanks @JBabey for pointing out my error in reading the json property, and suggesting function (key, value) in the $.each statement.

Thanks @Darin Dimitrov for helping sort my controller out!

Answer 1

Your controller action is wrong. You are manually JSON serializing inside it and then returning this as a JSON result thus ending up with a double JSON serialization. You could directly return the array and leave the JSON serialization plumbing to the ASP.NET MVC framework:

public ActionResult GetOrderSelectList(int parentCategoryId)
{
    var result = Session
        .QueryOver<Category>()
        .Where(x => x.Parent.Id == parentCategoryId)
        .OrderBy(x => x.OrderInList)
        .Asc
        .List();
    return Json(result, JsonRequestBehavior.AllowGet);
}

and then:

$.getJSON("/Json/GetOrderSelectList?parentCategoryId=" + postData, testData, function (jsonResult) {
    $('#orderInList option').remove();
    $.each(jsonResult, function () {
        $('#orderInList').append(
            $("<option value=" + this.Id + ">" + this.Value + "</option>")
        );
    });
});

Notice that I am using this.Id and this.Value here. This assumes that the JSON result looks like this:

[{"Id": 1, "Value": "some value"}, {"Id": 2, "Value": "some other value"}]

You will have to adapt those property names based on your actual Category model.

Answer 2

You are confusing a property of your data returned by your ajax with the data itself. $.each will work fine if you correct this.

Your data returned looks like this:

{
    "jsonResult": "[
        {\"OrderInList\":1},
        {\"OrderInList\":2}
    ]"
}

Which means that is the object passed to your success function. Call it data instead of jsonResult .

function (data) {
    ...
    $.each(data.jsonResult, function (key, value) {
        ...
    });
});

Also, your array is coming through as a string, so you may need to parse it before $.each will be able to iterate it.