c# – How to populate a select with JQuery

Question:

I have a registration screen where the user can add or not phone numbers. I'm adding fields for phone insertion dynamically, but one of these fields is a select that will bring data from the database. My jquery is hitting the controller and is returning the list with database data, but it's not filling the select, I don't know where the error is. in console.log does not bring anything.

Html

<button type="button" id="btnAddTelefone">Adicionar</button>
        <table id="tblTelefones">
            <thead>
                <tr>
                    <td>DDD</td>
                    <td>Numero</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

JQuery

$("#tblTelefones tbody").append("<tr>" +
                        "<td><select id='ddlTipoTelefone' name='ddlTipoTelefone'><option value>---Selecione um Tipo---</option></select></td>" +
                        "<td><input id='txtDDD'></td>" +
                        "<td><input id='txtNumero'></td>" +
                        "<td><input id='txtRamal'></td>" +
                        "<td class='bto'><button type='button' class='bt-salvar'>Salvar</button></td></tr>");

                        $.ajax({
                            type: "get",
                            url: "/Prestador/GetAllTipoAcessoTelefone",
                            data: { tipos: $("#ddlTipoTelefone").val() },
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            success: function (obj) {

                                if (obj != null) {
                                    var data = obj.data;
                                    var selectbox = $('#ddlTipoTelefone');
                                    alert(data);
                                    //selectbox.find('option').remove();
                                    $.each(data, function (i, d) {
                                        $('<option>').val(d.TipoId).text(d.TipoNome).appendTo(selectbox);
                                    });
                                }
                            }
                        });

Controller

[HttpGet]
    public JsonResult GetAllTipoAcessoTelefone()
    {
        var lista = _commonService.GetAllTipoAcessoTelefonico()
            .Select(x => new { x.TipoId, x.TipoNome});

        return Json(lista, JsonRequestBehavior.AllowGet);
    }

Does anyone know what can it be?

Obs.: the alert(data) there in the middle appears "undefined".

Answer:

I only managed to remove the "obj" and leave only "data".

I leave the solution to the next people.

$.ajax({
  type: "get",
  url: "/Prestador/GetAllTipoAcessoTelefone",
  data: { tipos: $("#ddlTipoTelefone").val() },
  dataType: 'json',
  contentType: "application/json; charset=utf-8",
  success: function (data) {
          var selectbox = $('#ddlTipoTelefone');
          $.each(data, function (i, d) {
              selectbox.append('<option value="' + d.TipoId+ '">' + d.TipoNome + '</option>');
          });
  } });
Scroll to Top