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?