CODEWITHSUNDEEP
c#javascriptjqueryajaxasp.net-mvc
user3788671
user3788671

Reputation: 2047

Display a List in a DIV with Ajax

I am trying to use ajax to display a list of strings in a div but I am not sure how to parse the data in Ajax.

Here is my method in C#:

public JsonResult GetRecentEmployeeRecords(string whse)
{
    var recentRecords = _employeeDb.EmployeeMasters.Where(e => e.Branch == whse).OrderBy(e => e.CreateDate).Take(10);
    var list = recentRecords.Select(r => r.EmployeeNumber + " - " + r.LastName + ", " + r.FirstName).ToList();
    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(list);
    return Json(json, JsonRequestBehavior.AllowGet);
}

Here is my ajax statement:

    $.ajax(
    {
        type: 'GET',
        url: '../Employee/GetRecentEmployeeRecords',
        data:
        {
            whse: $('#Branch').val(),
        },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            for (var i in data) {
                $('#recentEmployeeNumbers').val(data[i] + "<br/>");
                alert(data[i]);
            }
        }
    });

and it appears that I am getting data back but it appears as it is only giving me single characters at a time. What is the best way to get the entire string at a time and display all ten of them in a div?

Upvotes: 0

Views: 2467

Answers (2)

gilly3
gilly3

Reputation: 91487

I see two three issues. First, it looks like you are double encoding your response in your c# code. JavaScriptSerializer.Serialize() and Json() do more or less the same thing. Pick one.

Second, in JavaScript, for..in is for enumerating an Object. It looks like you want to iterate an array. For that, use a regular for loop:

for (var i = 0; i < data.length; i++) {
    $('#recentEmployeeNumbers').val(data[i] + "<br/>");
    alert(data[i]);
}

An easier way to iterate an array is with jQuery's $.each():

$.each(data, function(i) {
    $('#recentEmployeeNumbers').val(this + "<br/>");
    alert(this);
});

Or, JavaScript 5's Array.forEach():

data.forEach(function(item, i) {
    $('#recentEmployeeNumbers').val(item + "<br/>");
    alert(item);
});

Use an Array.forEach() polyfill for older browsers.

Edit: Third, you are replacing the value of #recentEmployeeNumbers in each iteration of the loop. .val() is only good for input elements, but you asked about populating a div. You want something like .append() (for html) or .text() (will html encode values):

$.each(data, function(i) {
    $("<div>").text(this).appendTo('#recentEmployeeNumbers');
});

One more small thing I noticed. You don't really need to call .ToList(). Either JSON serializer should be able to handle serializing an IEnumerable<string> without a problem.

Upvotes: 2

petelids
petelids

Reputation: 12815

You are double JSON encoding the response.

The return Json(..) will encode the result but you have already encoded it in your call to jsonSerialiser.Serialize. From the MSDN documentation the Controller.Json method:

Creates a JsonResult object that serializes the specified object to JavaScript Object Notation (JSON).

To solve it simply pass list directly to the Json call:

public JsonResult GetRecentEmployeeRecords(string whse)
{
    var recentRecords = _employeeDb.EmployeeMasters.Where(e => e.Branch == whse).OrderBy(e => e.CreateDate).Take(10);
    var list = recentRecords.Select(r => r.EmployeeNumber + " - " + r.LastName + ", " + r.FirstName).ToList();

    return Json(list, JsonRequestBehavior.AllowGet);
}

Also, in your JavaScript you are then overwriting the contents of the div on each iteration:

$('#recentEmployeeNumbers').val(data[i] + "<br/>");

You could swap the val for append to append the details to the div:

$('#recentEmployeeNumbers').append(data[i] + "<br/>");

Upvotes: 0

Related Questions