How to view JSON data in jQuery Datatables via Ajax?

Asked

Viewed 249 times

1

My table is not being loaded with the data that is in my JSON file, as I have little experience do not know what is wrong.

My JSON file is in the same directory as the web page in question, this is my JSON file.

[
    {
        "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

This is my HTML file;

<%@ 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>

My jquery file is version 3 jquery-3.4.1.min. js and it’s imported in the right way, the part that’s wrong is the one below;

<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>

How to fix and JSON file information appears in the table on screen?

javascript ajax

2 answers

1


Table structure is wrong. According to documentation, the table structure should be basically:

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

Note that in your table the thead and the tbody, and is in the tbody where you should do the .append():

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

Another thing, you are making append with a smaller number of columns than there is in the table, and this results in error. Notice that you have placed 5 columns <th> and is making append of only 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>';
});

Making these fixes, your code will work perfectly.

As well noted in Mauro Roberto’s reply, by the code posted on the question, it seems that you are carrying jQuery after the script. With this the $( document ).ready(function() { make a mistake because at that point in the script jQuery is not yet in memory.

If the above is another problem, you can change the:

$( document ).ready(function() {

for:

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

1

Hello. You need to include the jquery before your code. Simply change the order as follows:

<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>

Maybe later you’ll have trouble cross origin because of the request to json. Look at the navigator’s console in case of an error...

I will leave a reference on:
https://stackoverflow.com/questions/5224017/origin-null-is-not-allowed-by-access-control-allow-origin-in-chrome-why

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.