Create table with data from getJSON

Question

I'm sending the variable's value through the url to filter by employees, like this:

<form  method="POST" action="">
    <ul class="flex-outer">
        <li>
            <label for="colb">Colaborador</label>
                <select class="form-control" id="colb" name="colb" required="" style="width: 25% !important; min-width: 25%; max-width: 25%;">
                <option></option>
                <?php        
                $sql = "SELECT id, nome FROM raddb.usuarios WHERE id NOT IN ('107', '93', '94', '95', '96', '97', '98', '99') AND situacoe_id = '1' ORDER BY nome ASC";
                $qr = mysqli_query($conn, $sql);
                while($ln = mysqli_fetch_assoc($qr)){
                echo '<option value="'.$ln['id'].'">'.$ln['nome'].'</option>';
                }
                ?>      
                </select>
        </li>
            <button style="float:right" type="button" class="btn btn-success" id="btn_entrar" data-toggle="modal">Consultar</button>
    </ul>
</form>

JavaScript:

$(function () { 
$('#btn_entrar').on("click", function() {
  var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {

});
}); 
});

As an array comes from json_encode, I'm looping it inside the javascript like this:

var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 

DataAtrib = data[i][0];
Farda = data[i][1];
Tamanho = data[i][2];
Qtdfar = data[i][3];
nome = data[i][4];
Funcao = data[i][5];

}

Then inside the javascript I have to fill the table in html like this:

$('#daat').html(DataAtrib);
   document.getElementById("daat").value = DataAtrib;
   
  $('#datf').html(Farda);
   document.getElementById("datf").value = Farda;
  
  $('#datt').html(Tamanho);
   document.getElementById("datt").value = Tamanho;
   
  $('#datq').html(Qtdfar);
   document.getElementById("datq").value = Qtdfar;
   
  $('#datn').html(nome);
   document.getElementById("datn").value = nome;
  
  $('#datfu').html(Funcao);
   document.getElementById("datfu").value = Funcao;

Before showing the table, I put the full javascript:

$(function () { 
$('#btn_entrar').on("click", function() {
  var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {

    var arrayLength = data.length;
    for (var i = 0; i < arrayLength; i++) { 
    
    DataAtrib = data[i][0];
    Farda = data[i][1];
    Tamanho = data[i][2];
    Qtdfar = data[i][3];
    nome = data[i][4];
    Funcao = data[i][5];
 
    }
  
  $('#daat').html(DataAtrib);
   document.getElementById("daat").value = DataAtrib;
   
  $('#datf').html(Farda);
   document.getElementById("datf").value = Farda;
  
  $('#datt').html(Tamanho);
   document.getElementById("datt").value = Tamanho;
   
  $('#datq').html(Qtdfar);
   document.getElementById("datq").value = Qtdfar;
   
  $('#datn').html(nome);
   document.getElementById("datn").value = nome;
  
  $('#datfu').html(Funcao);
   document.getElementById("datfu").value = Funcao;
    
});
}); 
});

Table:

<table class="table table-responsive" id="emp_fa"> 
    <thead> 
        <tr> 
            <th>Atribuíção</th>
            <th>Farda</th>
            <th>Tamanho</th>
            <th>Quantidade</th>
            <th>Colaborador</th>
            <th>Função</th>
        </tr>
        </thead>
        <tbody>
        <tr>        
            <td id="daat"></td>
            <td id="datf"></td> 
            <td id="datt"></td> 
            <td id="datq"></td>
            <td id="datn"></td>
            <td id="datfu"></td>            
        </tr>
    </tbody>
</table>

Everything works fine when you return only one row from the database. When, for example, two or three rows from the database are returned, only the last row returned is shown in the table, but I intend to show the three rows returned from the database in different rows in the table.

editarfa:

$colb = $_GET["col"];

$stmt = $conn->prepare("SELECT DataAtrib, raddb.Fardas.Farda, Tamanho, Qtdfar, nome, Funcao

FROM raddb.SaidaFarda LEFT OUTER JOIN raddb.Fardas ON raddb.Fardas.Id = raddb.SaidaFarda.Farda 

LEFT OUTER JOIN raddb.TamanhoLuvas ON raddb.TamanhoLuvas.Id = raddb.SaidaFarda.Tama 

LEFT OUTER JOIN raddb.usuarios ON raddb.usuarios.id = raddb.SaidaFarda.Colabo 

LEFT OUTER JOIN raddb.FuncaoCol ON raddb.FuncaoCol.Id = raddb.SaidaFarda.Func

WHERE SaidaFarda.Colabo = '$colb' ORDER BY DataAtrib DESC");

$stmt->execute();

$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
    extract($row);
    $json[]= [(string)$DataAtrib, (string)$Farda, (string)$Tamanho, (int)$Qtdfar, (string)$nome, (string)$Funcao];
}

echo json_encode($json);

You need to create tr details dynamically and append in tbody — Shibon, Jul 08 '20 at 09:58
I guess you forgot to include this `$.getJSON('./editarfa` the most important script or whatever that is in your post. — GetSet, Jul 08 '20 at 09:58
@Shibon And how do I create the dynamic three? Can you help? — Bruno, Jul 08 '20 at 10:00
Here's an idea: Just show your code. Then comment on its sections in your post. That way you dont accidently leave out things. — GetSet, Jul 08 '20 at 10:00
@GetSet I'll put it, but this is just the database query. Already added — Bruno, Jul 08 '20 at 10:00
Its lengthy already but it just doesn't contain the error areas. Show it all. You are the one who doesnt know where the problem resides. — GetSet, Jul 08 '20 at 10:02
https://stackoverflow.com/questions/8749236/create-table-with-jquery-append/12562613 — Shibon, Jul 08 '20 at 10:03
Does this answer your question? [Create table with jQuery - append](https://stackoverflow.com/questions/8749236/create-table-with-jquery-append) — Shibon, Jul 08 '20 at 10:03
@GetSet It does not generate an error. Works well. The problem is that when more than one row is returned from the database, only the last one is shown in the table. The problem must be in the three, as they are not dynamic. — Bruno, Jul 08 '20 at 10:04
"only the last one is shown in the table" ...because you only have one fixed row. If you want a row for each result in your data, then you need to write some jQuery code to dynamically create new table rows and add them to your table. I think you can probably find tutorials / examples / old questions online which would show you the basic idea of doing that. — ADyson, Jul 08 '20 at 10:05
Maybe. But im glad you are showing all your code now for that to be determined by a 3rd party, — GetSet, Jul 08 '20 at 10:05
Meaning per @ADyson your every row overwrites the previous. You only get the last. ... This is progress. Means you only have a front-end problem. — GetSet, Jul 08 '20 at 10:11
I see the post that you put here for the creation of dynamic td, but I am not able to apply it in my code. Can you put an example? — Bruno, Jul 08 '20 at 10:17
To be a lil less eloquent, you could always use "innerHTML" ... just to get it working. Then optimize for speed and better options later on. .................. in answer to your "dynamic td" — GetSet, Jul 08 '20 at 10:27
No i cant help with a "pivot" table since that is behavior very far different from your original question. Perhaps a new thread is justified where you can refer back to this one? A thread isn't a ongoing dialogue on any topic after all. — GetSet, Jul 08 '20 at 10:46
@GetSet There was no need to cast a negative vote. I got your message. But I appreciate all the help that was given to reach the solution — Bruno, Jul 08 '20 at 11:08

score 0 · Answer 1 · answered Jul 08 '20 at 11:07

After your comments on my question, I realized that the solution was to put the dynamic tbody.

So I got to work and arrived at the solution.

I changed my table to:

<table class="table table-responsive" id="emp_fa"> 
    <thead> 
        <tr> 
            <th>Atribuíção</th>
            <th>Farda</th>
            <th>Tamanho</th>
            <th>Quantidade</th>
            <th>Colaborador</th>
            <th>Função</th>
        </tr>
        </thead>
        <tbody>
        <tr>        
            <td></td>
            <td></td>   
            <td></td> 
            <td></td>
            <td></td>
            <td></td>           
        </tr>
    </tbody>
</table>

and in javascript I did the following:

var linha = ``; 
var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 
   DataAtrib = data[i][0];
   Farda = data[i][1];
   Tamanho = data[i][2];
   Qtdfar = data[i][3];
   nome = data[i][4];
   Funcao = data[i][5]; 
   linha += `<tr>            
   <td>${ DataAtrib }</td> 
   <td>${ Farda }</td> 
   <td>${ Tamanho }</td> 
   <td>${ Qtdfar }</td>
   <td>${ nome }</td> 
   <td>${ Funcao }</td>              
   </tr>`; 
}
$("#emp_fa tbody").html(linha);

The full javascript looked like this:

$(function () { 
$('#btn_entrar').on("click", function() {
  var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {
    var linha = ``; 
    var arrayLength = data.length;
    for (var i = 0; i < arrayLength; i++) { 
       DataAtrib = data[i][0];
       Farda = data[i][1];
       Tamanho = data[i][2];
       Qtdfar = data[i][3];
       nome = data[i][4];
       Funcao = data[i][5]; 
       linha += `<tr>            
       <td>${ DataAtrib }</td> 
       <td>${ Farda }</td> 
       <td>${ Tamanho }</td> 
       <td>${ Qtdfar }</td>
       <td>${ nome }</td> 
       <td>${ Funcao }</td>              
       </tr>`; 
    }
    $("#emp_fa tbody").html(linha);
    
});
}); 
});

Create table with data from getJSON

1 Answers1