1

Minha tabela não está sendo carregada com os dados que estão no meu arquivo JSON, como tenho pouca experiência não sei o que está havendo de errado.

Meu arquivo JSON está no mesmo diretório que se encontra a página web em questão, esse é meu arquivo JSON.

[
    {
        "id": "1",
        "name": "wladimir bandeira",
        "gender": "Male",
        "designation": "Manager",
        "age": "38"
    },
    {
        "id": "1",
        "name": "wladimir bandeira",
        "gender": "Male",
        "designation": "Manager",
        "age": "38"
    },
    {
        "id": "1",
        "name": "wladimir bandeira",
        "gender": "Male",
        "designation": "Manager",
        "age": "38"
    },
    {
        "id": "1",
        "name": "wladimir bandeira",
        "gender": "Male",
        "designation": "Manager",
        "age": "38"
    }
]

mockingTest.json

Esse é meu arquivo HTML;

<%@ include file="/pages/template/imports.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<div class="row">
    <div class="col-md-12">
        <h1>Não Conformidade</h1> 
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="btn-group" role="group" aria-label="...">
        <button class="btn btn-primary pull-left" data-toggle="collapse" data-target="#pesquisa" aria-expanded="false" aria-controls="collapseExample"><i class="glyphicon glyphicon-search"></i> Pesquisar</button>
        <c:if test="${resultPage.sizeResult != 0}">
            <button type="button" class="btn btn-primary" title="Gerar PDF" onclick="gerarPdf();"><i class="glyphicon glyphicon-list"></i> Gerar PDF</button>
        </c:if>
        </div>
    </div>
</div>

<body>
    <div class="container">
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="employee_table">
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Gender</th>
                    <th>Designation</th>
                    <th>Age</th>
                </tr>
            </table>
        </div>
    </div>
</body>


<script>
$( document ).ready(function() {
 $.getJSON("mockingTest.json", function(data){ 
     var employee_data = '';
      $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.name+'</td>';
          employee_data += '<td>'+value.gender+'</td>';
          employee_data += '<td>'+value.designation+'</td>';
          employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);    
  });
 });




 </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

O meu arquivo jquery é da versão 3 jquery-3.4.1.min.js e está importada da forma correta, a parte que está errada é essa debaixo;

<script>
$( document ).ready(function() {
 $.getJSON("mockingTest.json", function(data){ 
     var employee_data = '';
      $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.name+'</td>';
          employee_data += '<td>'+value.gender+'</td>';
          employee_data += '<td>'+value.designation+'</td>';
          employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);    
  });
 });




 </script> 

Como faço para corrigir e as informações do arquivo JSON aparece na tabela em tela?

2 Respostas 2

0

A estrutura da tabela está errada. De acordo com a documentação, a estrutura da tabela deve ser basicamente:

<table id="id_da_tabela">
   <thead>
      <tr>
         <th>texto</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>texto</td>
      </tr>
   </tbody>
</table>

Repare que na sua tabela falta o thead e o tbody, e é no tbody aonde você deve fazer o .append():

$('#employee_table tbody').append(employee_data);

Outra coisa, você está fazendo append com um número de colunas menor do que existe na tabela, e isso resulta em erro. Repare que você colocou 5 colunas <th> e está fazendo append de apenas 3:

$.each(data, function(key, value){
    employee_data += '<tr>';
    // FALTAM 2 COLUNAS PARA FECHAR 5
    employee_data += '<td>'+value.name+'</td>';
    employee_data += '<td>'+value.gender+'</td>';
    employee_data += '<td>'+value.designation+'</td>';
    employee_data += '</tr>';
});

Fazendo essas correções, seu código irá funcionar perfeitamente.

Como bem observado na resposta do Mauro Roberto, pelo código postado na pergunta, parece que você está carregando o jQuery depois do script. Com isso o $( document ).ready(function() { vai dar erro porque nesse ponto do script o jQuery ainda não está na memória.

Se o descrito acima for mais um problema, você pode trocar o:

$( document ).ready(function() {

por:

document.addEventListener("DOMContentLoaded", function(){
0

Olá. Você precisa incluir o jquery antes do seu código. Basta mudar a ordem da seguinte forma:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
 $.getJSON("mockingTest.json", function(data){ 
     var employee_data = '';
      $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.name+'</td>';
          employee_data += '<td>'+value.gender+'</td>';
          employee_data += '<td>'+value.designation+'</td>';
          employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);    
  });
 });
 </script>

Talvez depois você vá ter problema de cross origin por causa da requisição ao json. Olhe o console do navegar caso dê algum erro...

Irei deixar uma referência sobre:
https://stackoverflow.com/questions/5224017/origin-null-is-not-allowed-by-access-control-allow-origin-in-chrome-why

Você deve fazer log-in para responder a esta pergunta.