AJAX function to update table

Question

I have this function in AJAX to update the data of a table, the data is coming from the controller correctly, but it does not update with the correct data, it updates blank.

function buscaFornecedores(id) {
var url = "/Produto/BuscaFornecedor";
$.ajax({
    url: url,
    type: 'GET',
    data: { id: id},
    success: function (data) {
        $("#tabelaf").html(data);
    }
});

}

It would be possible to do something like this link ? Utilizo MVC Core Page Razor.

EDIT

I receive this way the data, giving a console.log(date.)

EDIT This is my HTML:

<table class="table table-responsive table-hover" id="tabelaf">
                    <thead>
                        <tr>
                            <th>Fornecedores</th>
                            <th style="text-align:right"><a data-toggle="modal" data-target="#myModalAdd" title="Adicionar Novo Fornecedor" class="btn btn-info"><i class="fa fa-plus"></i></a></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.ProdutosFornecedores)
                        {
                            <tr class="tr">
                                <td>@item.FornecedorProduto.Nome</td>
                                <td align="right">
                                    <a class="link-excluir" href="#" data-id="@item.Id" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

Answer 1

Try this:

success: function (data) {
        var trHTML = '';
        $.each(data, function (i, item) {
            trHTML += '<tr><td>' + item.id+ '</td><td>' + item.fornecedorProduto+ '</td><td>' + item.fornecedorID + '</td><td>' + item.produtoFornecedor+ '</td><td>' + item.produtoID+ '</td></tr>';
        });
        $('#tabelaf').append(trHTML);
    }