Question

I am trying to take the JSON results from an MVC3 action and push it into a table row but the values are all undefined. How can I properly parse the JSON results from a JQuery ajax request?

This is the MVC3 action method

    [HttpPost]
    [Authorize]
    public JsonResult GetImageDetails(int id)
    {
        Image img = db.Images.First(i => i.ID == id);
        return Json(img);
    }

This is the JQuery to handle the results once they return

    $.ajax({
        type: "POST",
        url: "../Controller/GetImageDetails",
        data: "id=" + id,
        dataType: "json",
        success: function (data) {
            $.map(data, function (item) {
                $('#tblImages > tbody > tr:first').before("<tr><td>ID:" + item.ID + "</td><td><img src='" + item.ThumbURL + "' alt='" + item.Name + "'/></td></tr>");
            });
        },
        error: function (obj) {

        }
    })

The result are rows with nothing but undefined. I get the same number of rows as there are properties in the object I’m returning so I’m sure I’m just not handling that JSon result correctly. Can anyone point me in the right direction on how to handle that JSon result please? Also are there any browser support issues with the suggested approach? Thanks in advance!

Answer 1

It looks like you are trying to use $.map on a single object. I think this will end up iterating through the property keys of that object. Try just accessing the object properties off the data object

$.ajax({
        type: "POST",
        url: "../Controller/GetImageDetails",
        data: "id=" + id,
        dataType: "json",
        success: function (data) {
                $('#tblImages > tbody > tr:first').before("<tr><td>ID:" + data.ID + "</td><td><img src='" + data.ThumbURL + "' alt='" + data.Name + "'/></td></tr>");
        },
        error: function (obj) {

        }
    })