Parse JSON List (via C#) in jQuery AJAX Success Callback

Question

I'm using jQuery's AJAX methods to call a C# service to return a JSON serialized list.

[HttpPost]
public JsonResult SearchTicket(ViewModelTicket ticket) {

    var list = UnitOfTicket.Where(x =>x.TicketId == ticket.TicketId);

    return Json(new { list  }, JsonRequestBehavior.AllowGet);
}

I parse the response from within the success callback function and render it as HTML.

  $.ajax({ type: "POST", url: url, data: JSON.stringify(Ticket), dataType: "json", contentType: 'application/json; charset=utf-8', success: function (list) { var data = list; for (var i in data) { alert(JSON.stringify(data[i])); $('#tbody-element').append( '<tr>' + '<td>' + data[i].TicketId + '</td>' + '<td>' + data[i].Title + '</td>' + '<td>' + data[i].PriorityId + '</tr>' + '<td>' + data[i].OpenDateAndTime + '</tr>' + '<td>' + data[i].SlaExpiration + '</td>' + '</tr>' ); } }, error: function () { alert("Error occured!!") } }); 

The response is displayed in an alert:

[{"TicketId":1,"OpenDateAndTime":"/Date(1517833557277)/","ClosedDateTime":null,"VersionId":140,"PriorityId":2,"CompanyId":0,"UserId":null,"Rate":null,"SlaExpiration":null,"TicketTypeId":1,"StatusId":1,"ProductId":1,"SubProductId":1,"TaskId":1,"Title":"Primeiro Chamado","Files":null}]

My problem is rendering an object with an undefinded value. For example: data[i].Title ...

I am following this post: Parse returned C# list in AJAX success function

Answer 1

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(Ticket),
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    success: function (list) {
        for(var i = 0, len = list.length; i < len; i++) {
            $('#tbody-element').append(
                 '<tr>' +
                     '<td>' + list[i].TicketId + '</td>' +
                     '<td>' + list[i].Title + '</td>' +
                     '<td>' + list[i].PriorityId + '</tr>' +
                     '<td>' + list[i].OpenDateAndTime + '</tr>' +
                     '<td>' + list[i].SlaExpiration + '</td>' +
                 '</tr>'
             );
        }
    },
    error: function () {
        alert("Error occured!!")
    }
});

Your response is already parsed which means your list variable is an array.

Answer 2

If you try alert(JSON.stringify(data)) what do you see? Your code works as if data is an Array of objects, but it may actually be an Array full of nested Arrays.

If alert(JSON.stringify(data[i])); is showing you [{"TicketId":...}] it looks like data[i] is an Array containing a single object--in this case, data[i].TicketId is undefined but data[i][0].TicketId should have the value you want. If this is the case, using data[i][0] instead of data[i] across the board should help you out.

---

Note: I'd be careful about using for (var i in data) , though, since if data is an Array and you have any sort of data added to Array.prototype (eg a polyfilled Array method), then it will be included in this loop. It'd be safer to use:

for (var i in data) {
    if (data.hasOwnProperty(i)) {
        ...
    }
}