Populating Data into Text field through REST API

Question

I am stuck at a small place, could you all kindly help me.

Below code shows, receiving People Picker Column data(Should Cost Modeler Field Name) into Text field which is (Employee Name) and converting that Employee Name Text field to drop down.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var employeeName=$("input[title^='Employee Name']").val();
$("input[title^='Employee Name']").hide();
$("input[title^='Employee Name']").after("<select id='EmployeeField' class='ms-RadioText'><option value=''></option></select>");
var allEmployeeNames=getAllEmployeeNames();
$.each(allEmployeeNames,function(i,employee){
    if(employeeName==employee.Should_x0020_Cost_x0020_Modeler.Title){
        $("#EmployeeField").append("<option selected='selected' value='"+employee.Should_x0020_Cost_x0020_Modeler.Title+"'>"+employee.Should_x0020_Cost_x0020_Modeler.Title+"</option>");
    }else{
        $("#EmployeeField").append("<option value='"+employee.Should_x0020_Cost_x0020_Modeler.Title+"'>"+employee.Should_x0020_Cost_x0020_Modeler.Title+"</option>");
    }       
});
$("#EmployeeField").change(function(){
    $("input[title^='Employee Name']").val($(this).val());
  });
   })
   function getAllEmployeeNames(){
    var results;
$.ajax({
    url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'4BFF0A20-43A2-4444-881C-18932D468E54')/items?$select=Should_x0020_Cost_x0020_Modeler/Title&$expand=Should_x0020_Cost_x0020_Modeler/Id",
    type: "GET",
    async:false,
    headers: {
        "Accept": "application/json;odata=verbose",
    },
    success: function (data) {
        if(data.d.results.length>0){
            results=data.d.results;
        }
    },
    error: function (data) {
        //alert("Error");
    }
});
return results;
    }
  </script>

The above code populates the the dropdown but it gives undefined as value in dropdown . Below image shows can convey the message.

Hope you guys can help me out on this.
Thanks.

Answer 1

Because the "Should Cost Modeler" column allow multiple data. Modify the code as below.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var employeeName=$("input[title^='Employee Name']").val();
    $("input[title^='Employee Name']").hide();
    $("input[title^='Employee Name']").after("<select id='EmployeeField' class='ms-RadioText'><option value=''></option></select>");
    var allEmployeeNames=getAllEmployeeNames();
    $.each(allEmployeeNames,function(i,employee){
        $.each(employee.Should_x0020_Cost_x0020_Modeler.results,function(j,item){
            if(employeeName==item.Title){
                $("#EmployeeField").append("<option selected='selected' value='"+item.Title+"'>"+item.Title+"</option>");
            }else{
                if(item.Title!=undefined){
                    $("#EmployeeField").append("<option value='"+item.Title+"'>"+item.Title+"</option>");
                }           
            }   
        });         
    });
    //remove duplicate values
    $("#EmployeeField option").each(function() {
        $(this).siblings('[value="'+$(this).val()+'"]').remove();
    });
    $("#EmployeeField").change(function(){
        $("input[title^='Employee Name']").val($(this).val());
    });
})
function getAllEmployeeNames(){
    var results;
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'4BFF0A20-43A2-4444-881C-18932D468E54')/items?$select=Should_x0020_Cost_x0020_Modeler/Title&$expand=Should_x0020_Cost_x0020_Modeler/Id",
        type: "GET",
        async:false,
        headers: {
        "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                results=data.d.results;
            }
        },
        error: function (data) {
        //alert("Error");
        }
    });
    return results;
}
</script>