Not displaying all array values on the screen

Question

I made a call to get JSON values from an external code (PHP). In console.log, shows all the data right, but when I go from jquery to display on the screen, it only returns me the last value of the array.

$(document).ready(function (){
  var url = "https://siteteste98874.com/select.php";
            $.getJSON(url, function(result){
                console.log(result);
                $.each(result, function(i, field){
                    var nome = field.nome_produto;
                    $('.nome td').text(nome);
                });
            });
}); 

<h3>Todas Lojas</h3>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Nome</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="nome">
                            <td></td>
                        </tr>
                        </tbody>
                    </table>

In the console.log shows all store names

Already on the screen only the last array value is shown

Answer 1

Your problem is exactly on that line:

$('.nome td').text(nome);

Whenever it is executed, the text of <td> is replaced by a new name, so you only see the last.

You need to use the createElement() and appendChild() to insert a new <tr> and <td> every turn of the loop.