Fill array table

Question

Hello, I’m developing a web project but I can’t get the desired result. I have a php file that returns me an array of vehicles and my Index calls this file to get this array through ajax. When searching in Index, it returns the part of the matrix that corresponds to what I looked for, but I would like to fill the table with the data and not print a pure array on the page. Thanks to those who help !!

My code:

  $(document).on('click', '#pesquisa', function () {
                    showPesquisa();
                    clearResponse();
                });
                // show home page
                function showPesquisa() {

                    var html = `
                    <style>
        body {background-image: url("imagens/5series.jpg");
        background-size: cover;
        color: #FFFFFF
        </style>     
            <h2>Pesquisar</h2>  
            <form id='search_form'>
                <div class="form-group">
                    <input type="text" class="form-control" name="s" id="s" required placeholder='insira o seu nome'/>
                </div>
            </form>
                    <button type="button" class="btn btn-warning" id="search_btn">Pesquisar</button>
                
     
        <div class="container">
   <table class="table table bordered" id="veiculosTable">
      <thead>
        <tr>
          <th>Identificador</th>
          <th>Categoria</th>
          <th>Marca</th>
          <th>Modelo</th>
          <th>Lugares</th>
          <th>€/dia</th>
          <th>Combustível</th>
          <th>Portas</th>
          <th>Caixa</th>
          <th>Empresa</th>
        </tr>
      </thead>
      <tbody></tbody>
   </table>
</div>
            
      
            `;

                    clearResponse();
                    $('#content').html(html);
                };
                
//$("#search_btn").click(function(){
  $(document).on('click', '#search_btn', function () {  
    var search_form = $("#search_form");
    var search_data = JSON.stringify(search_form.serializeObject());
    
    
    $.ajax({
        url: 'api/veiculo/search.php',
        type: "POST",
        data: search_data,
        dataType: 'JSON',
        success: function(response) {
            $('#response').html("<div class='success'>"+JSON.stringify(response)+'</div>');
        },
                     error: function (xhr, resp, text) {
                            // on error, tell the user sign up failed
                            $('#response').html("<div class='alert alert-danger'>Erro de pesquisa: "+xhr+" "+resp+" "+text+'</div>');
                        }
    });
});

Upshot:

Answer 1

You need to iterate the received JSON and assemble the lines of the tbody table.

First put the id resposta in tbody, where lines will be inserted:

<tbody id="resposta"></tbody>

Then, in the AJAX Success, you assemble the structure of the lines with the values received in JSON, as below:

Note that the array is inside the object records of JSON. Soon, you should take and iterate the array within response.records.

success: function(response) {

   let tabela = ``; // declara a variável vazia

   // vai montando as linhas com os valores do JSON
   for(let item of response.records){
     tabela += `<tr>
         <td>${item.ID}</td>
         <td>${item.id_Categoria}</td>
         <td>${item.Marca}</td>
         <td>${item.Modelo}</td>
         <td>${item.Lugares}</td>
         <td>${item.Preco_dia}</td>
         <td>${item.Combustivel}</td>
         <td>${item.Portas}</td>
         <td>${item.Caixa}</td>
         <td>${item.Empresas_ID}</td>
      </tr>`;
   }

   $('#resposta').html(tabela); // insere tudo no tbody
},