Problems loading Dropdownlist in cascade - Asp.net Core MVC

Question

I have two combobox in which the second has a cascade load that is, when I select something in the first, a query is made in the database and the data must fill in the second... My controller seems to be returning a json array correctly, but I think when it comes to loop (JS block) I am not able to properly load the second bombobox (id="contactType")... Someone knows how to help me?

Controller:

[HttpPost]
[Route("pessoa-fisica-gerenciar/getContatoTipo")]
public IActionResult getContatoTipo(PessoaFisicaFormaContato pessoaFisicaFormaContato)
{
    var pessoasFisicasFormasContatos = new SelectList(_pessoaFisicaFormaContatoTipoAppService.GetAllByPessoaFisicaContato(pessoaFisicaFormaContato), "Id", "ContatoTipo", 0);
    return Json(new
    {
        data = pessoasFisicasFormasContatos
    });
}

Dropdowns:

<div class="col-md-3">
    <label asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" class="control-label lb-pessoa-fisica-forma-contato">Forma de Contato</label>
    <select  id="pessoaFisicaFormaContatoTipo" asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" asp-items="@Model.PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.FormasContatos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-pessoa-fisica-forma-contato"></select>
    <span asp-validation-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.PessoaFisicaFormaContato" class="text-danger val-pessoa-fisica-forma-contato"></span>
</div>
<div class="col-md-3">
    <label asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" class="control-label lb-contato-tipo">Tipo de Contato</label>
    <select id="contatoTipo" asp-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" asp-items="@Model.PessoaFisicaViewModel.PessoasFisicasContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contato-tipo"></select>
    <span asp-validation-for="PessoaFisicaViewModel.PessoasFisicasContatosViewModel[i].PessoaFisicaFormaContatoTipoViewModel.ContatoTipo" class="text-danger val-contato-tipo"></span>
</div>

JS:

<script>
    $(document).ready(function () {
        $("#pessoaFisicaFormaContatoTipo").on("change", function () {
            $list = $("#contatoTipo");
            $.ajax({
                url: "/pessoa-fisica-gerenciar/getContatoTipo",
                type: "POST",
                data: { pessoaFisicaFormaContato: $("#pessoaFisicaFormaContatoTipo").val() },
                traditional: true,
                success: function (result) {
                    $list.empty();
                    $.each(result, function (i, item) {
                        $list.append('<option value="' + item["Id"] + '"> ' + item["ContatoTipo"] + ' </option>');
                    });
                    console.log(result);
                },
                error: function () {
                    alert("Something went wrong call the police");
                }
            });
        });
    });
</script>

Answer 1

tries to change his success:

success: function (data) {
            var itens = "<option>Selecione Contato</option>";
            $.each(data, function (i) {
                itens += "<option value= " + data.id + "> " + data.contatoTipo + " </option>";
            });

            $("#contatoTipo").html(itens);
        },

http://prntscr.com/mckobi