getJSON to populate dropdown list MVC4

Question

I have the following controller action:

[HttpPost]
    public ActionResult GetCourseSections(int courseID)
    {  
         var Sections = dbcontext.CourseSection.Where(cs => cs.CourseID.Equals(courseID)).Select(x => new
        {
            sectionID = x.CourseSectionID,
            sectionTitle = x.Title
        });
        return Json(Sections, JsonRequestBehavior.AllowGet);
    }

This returns the list that I am expecting. I then try to retrieve this list to populate a dropdown using the following code:

$.getJSON('@Url.Action("GetCourseSections", "Admin")',
            function(data) {
                var courseSectionDropdown = $('#coursesectiondd');
                courseSectionDropdown.empty();
                courseSectionDropdown.append($('<option/>', {
                    value: 0,
                    text: "Test"
                }));
                $.each(data, function (index, data) {
                    courseSectionDropdown.append($('<option/>', {
                        value: data.value,
                        text: data.text
                    }));
                });
            });

Although on debug I am able to see the list of JSON objects when adding them the only list item being added is the default option "Test" that I am setting. Can anyone see from my code why the data is not being read? Have I made a mistake in the jquery

Answer 1

You need to match your jQuery data properties with the same names from the method:

$.getJSON('@Url.Action("GetCourseSections", "Admin")', null,
        function(data) {
            var courseSectionDropdown = $('#coursesectiondd');
            courseSectionDropdown.empty();
            courseSectionDropdown.append($('<option/>', {
                value: 0,
                text: "Test"
            }));
            $.each(data, function (index, data) {
                courseSectionDropdown.append($('<option/>', {
                    value: data.sectionID,
                    text: data.sectionTitle
                }));
            });
 });

Answer 2

Try this .. it will work ...

  $.getJSON("@Url.Content("~/Admin/GetCourseSections")", null, function (data) {
         $('#coursesectiondd').empty();
         for (i = 0; i < data.length; i++) {    
                 $('#coursesectiondd').append($('<option></option>').text(data[i].sectionTitle).attr('ID', data[i].sectionID));
          } 
    });

Answer 3

it will work ...

 function changeSltLeague() {
    $.getJSON('/league/GetByName',
        { leagueName: $("#sltLeagueId option:selected").text() },
        function (data) {
            currentLeagueId = data.Id;
            currentLeague = data.Name;
            showNextRoundInfo('/round/GetNextRoundOfLeague', data.Id);
        });
}
 $(document).ready(function () {
    var leagueId = @leagueId;

    if (leagueId > 0) {
        $('#sltLeagueId option[value=' + leagueId +']').attr("selected", true);

        changeSltLeague();
    }

});