Undefined result on ajax request ASP.NET Core MVC

Question

This is my Context Class

public class UserInfoContext
{
    private readonly MVCDbContext _db;

    public UserInfoContext(MVCDbContext db)
    {
        _db = db;
    }

    public async Task<List<UserInformation>> GetAll()
    {
        var list = await _db.UserInfo.ToListAsync();
        return list;
    }

This is my Controller

private UserInfoContext _ui_context;        
    public UserInformationController(UserInfoContext ui_context)
    {
        _ui_context = ui_context;
    }

    // GET: UserInformation
    public IActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public async Task<IActionResult> LoadUserList()
    {
        var list = await _ui_context.GetAll();
        return new JsonResult(list);
    }

And this is my AJAX request

<script>
$(document).ready(function () {

    loadUser();
    function loadUser() {
        $.ajax({
            method: "GET",
            url: "/UserInformation/LoadUserList",  
            data: {},
            dataType: "JSON",
            success: function (data) {       
                var html = '';
                $.each(data, function (key, item) {
                    html += '<tr>';
                    html += '<td>' + item.Id + '</td>';
                    html += '<td>' + item.FirstName + '</td>';
                    html += '<td>' + item.LastName + '</td>';
                    html += '<td>' + item.Location + '</td>';                      
                    html += '</tr>';
                });
                $('#table_user').html(html);
            }
        });
    }

});

This is the result im getting

I'm getting "undefined result".

This is the log on debugger network tab

What am I doing wrong?

Answer 1

The problem is that your first letter is uppercase (eg: Firstname). But you have to start with lowercase (item.id, item.firstName etc.)

 $.each(data, function (key, item) {
                    html += '<tr>';
                    html += '<td>' + item.id + '</td>';
                    html += '<td>' + item.firstName + '</td>';
                    html += '<td>' + item.lastName + '</td>';
                    html += '<td>' + item.location + '</td>';                      
                    html += '</tr>';
                });