Trouble building a select list in razor view using ajax call to mvc controller returning JSON object

Question

As the title says I am having a bit of trouble with this. I have succeeded hardcoding the JSON but once I begin to use a model it goes wrong. Please see what I have to-date below.

Ajax

$(document).ready(function () {
    $.getJSON('/Programs/GetAll', function (data) {

    //clear the current content of the select
    $('#ProgramId').empty();

    //iterate over the data and append a select option
    $.each(data, function (key, val) {
    $('#ProgramId').append('<option id="' + key + '">' + val + '></option>');})
    });
});

Controller

[HttpGet]
    public JsonResult GetAll()
    {
        var progams = _context.Program
            .Select(a => new
            {
                id = a.Id.ToString(),
                name = a.Name
            }).ToList();

        return Json(progams);
    }

Current outcome

Current object

This hardcoding works with the ajax, js and html.

[HttpGet]
    public JsonResult Get()
    {
        Dictionary<string, string> programSelectList = new Dictionary<string, string>();
        programSelectList.Add("1", "Bob");
        programSelectList.Add("2", "Cratchett");
        return Json(programSelectList);
        //return Json(_context.Program.ToJson());
    }

I am missing something basic, no doubt, and any help would be greatly appreciated.

Thanks.

Shyju · Accepted Answer · 2016-11-04 14:51:32Z

1

The response coming back from your ajax call is an array of items each with an id and name property. So when you use $.each to loop through them, the variable val will be a single js object with those 2 properties. You just need to access those properties to set the option value and text.

$.each(data, function (key, val) {
    $('#ProgramId').append('<option value="' + val.id + '">' + val.name + '</option>');
});

Also, you probably need to specify JsonRequestBehavior when returning json data from a GET action method.

return Json(progams,JsonRequestBehavior.AllowGet);

answered Nov 4, 2016 at 14:51

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K7Buoy Over a year ago

That's the one! Thank you, I knew it was something simple I was missing. Really appreciate the quick response.

Collectives™ on Stack Overflow

Trouble building a select list in razor view using ajax call to mvc controller returning JSON object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related