How popular a select with Jquery

Question

I have a registration screen where the user can add or not phone numbers. I am adding fields for entering the phone 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 the database data, however it is not filling the select, I do not know where the error is. in the console.log brings nothing.

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 it can be?

Note: the Alert(date) there in the middle appears "Undefined".

Answer 1

One of the things that can cause the error is that all properties of the object in json start with initial minuscule when it comes from the controller, as below. To see how it is coming made a console.log(data) and see how it is coming. The rest seems correct.

$.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>');
          });
  } });

Answer 2

I managed to just remove the "obj" and leaving only "date".

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>');
          });
  } });