How can i get this Json to Fill my dropdown in MVC?

Question

The Goal is User types inputs an id the id get processed using StringFormat. Then compared to the database the return result returns all matches. So I have it returned in a JSON. I want to pull out the First and Last name and fill the Dropdown with it that infomation

This is my viewmodel using System; using System.Collections.Generic; using System.Linq; using System.Web;

namespace eFilingNoticeRetrieval.Models
{
    public class efViewModel
{
    public string first_name { get; set; }
    public string last_name { get; set; }
    public string efdcp_Random { get; set; }
    public int fk_efd_ID { get; set; } 


    }
}

This is My Controller

[HttpPost]
    public JsonResult Details(string searchTerm)
    {
        string searchTerm1 = StringFormat(searchTerm); // Takes the random off

        var model =
            from e in _db.eFiling_Document_CourtProcessed
            join item in _db.eQueue_Party on e.fk_efd_ID equals item.fk_efd_ID
            where (e.efdcp_UniqueServiceID == searchTerm1)
            select new efViewModel
            {
                first_name = item.efp_FirstName,
                last_name = item.efp_LastName,
                efdcp_Random = e.efdcp_Random,
                fk_efd_ID = item.fk_efd_ID
            };
        JsonResult result = new JsonResult();
        result.Data=JsonConvert.SerializeObject(model.ToList());

            return result;
    }

This is my view

<input type="text" name="searchTerm" id="searchTerm" onchange="getting()" />


<select  id="drops"/>

function getting()
{

    var searchTerm = $('#searchTerm').val();

    $.ajax({
        url: '@Url.Action("Details", "Home")',
            type: "POST",
          data: { searchTerm: searchTerm },

           beforeSend: function () { },
           success: function (searchTerm)
            {
               $($.parseJSON(searchTerm)).map(function () {
                   return $('<option>').val(this.value).text(this.label);
               }).appendTo('#drops');

            }

        });

This is my return

"[{\"first_name\":\"JIM\",\"last_name\":\"JOHNSON\",\"efdcp_Random\":\"BQONIZ\",\"fk_efd_ID\":771},{\"first_name\":\"JIM\",\"last_name\":\"JOHNSON\",\"efdcp_Random\":\"ELWKHE\",\"fk_efd_ID\":771},{\"first_name\":\"JIM\",\"last_name\":\"JOHNSON\",\"efdcp_Random\":\"ARVYTN\",\"fk_efd_ID\":771},{\"first_name\":\"NICK\",\"last_name\":\"NICHOLSON\",\"efdcp_Random\":\"BQONIZ\",\"fk_efd_ID\":771},{\"first_name\":\"NICK\",\"last_name\":\"NICHOLSON\",\"efdcp_Random\":\"ELWKHE\",\"fk_efd_ID\":771},{\"first_name\":\"NICK\",\"last_name\":\"NICHOLSON\",\"efdcp_Random\":\"ARVYTN\",\"fk_efd_ID\":771}]"

Answer 1

I would re factor this a bit

for your controller instead of

JsonResult result = new JsonResult();
result.Data=JsonConvert.SerializeObject(model.ToList());

try

return Json(model.ToList(), JsonRequestBehavior.AllowGet);

for your jquery try

    $.ajax({
        url: '@Url.Action("Details", "Home")',
            type: "POST",
            data: { searchTerm: searchTerm },
            beforeSend: function () { },
            success: function (searchTerm) {
                if (searchTerm) {
                    var $drops = $('#drops');
                    for (var i = 0; i < searchTerm.length; i++) {
                        $drops.append($('<option value="'+searchTerm[i].fk_efd_ID +'">'+searchTerm[i].first_name + " " + searchTerm[i].last_name +'</option>'));
                    }
                }                  
            }
        });

Edit

this is much more clean What is the best way to add options to a select from an array with jQuery?

    $.ajax({
        url: '@Url.Action("Details", "Home")',
        type: "POST",
        data: { searchTerm: searchTerm },
        beforeSend: function () { },
        success: function (searchTerm) {
            if (searchTerm) {
                $.each(searchTerm, function (key, value) {
                    $('#drops')
                         .append($('<option>', { value: value.fk_efd_ID })
                         .text(first_name + " " + last_name));
                });
            }
        }
    });