Values not displaying in listbox from database using mvc5

Question

Hi all

i want to display values in listbox from database and values getting in controller json method but displaying as [Object Object] like this..

 

Controller:-

--------------

public ActionResult GetColumnsByFavouriteReport(ReportsModel Model,string Columns) 
{    
 List<Report> ReportColumnsList = MCPAdminControllerPageObject.GetColumnsByReportName(Columns);    
 return Json(ReportColumnsList, JsonRequestBehavior.AllowGet);
 }

View :-

-------

 

$(document).ready(function () { $('#FavouriteReports').change(function () { $.ajax({               type: "POST",               url: '@Url.Action("GetColumnsByFavouriteReport", "MCPAdmin")',               data: { Columns: $('#FavouriteReports').val() },               datatype: "json",               traditional: true,               success: function (data) { $('#SelectedFields').empty(); $.each(data, function (key, val) { $('#SelectedFields').append('<option id="' + key + '">' + val + '</option>'); }) } }); }); 

 @Html.ListBoxFor(m => m.SelectedFields, new SelectList(new[] { "" }), new { @class = "form-control editable" })