I am trying to fill a table with data from an sql database using a fetch request but i can't get it to show on the table.
My fetch request:
const api_url = 'https://54d82a4bef854785886ab91f701b592a.vfs.cloud9.us-east-1.amazonaws.com/Materials';
// Defining async function
async function getMaterial(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getMaterial(api_url);
// Function to hide the loader
function hideloader() {
document.getElementById('loading').style.display = 'display';
}
// Function to define innerHTML for HTML table
function show(data) {
let tab =`<td>id_candidate</td><td>name</td><td>cc_number</td><td>candidate_type</td><td>birth_date</td><td>qualifications</td><td>candidate_situation</td>`;
// Loop to access all rows
for (let r of data) {
tab += `<tr><td>${r.cod_type_material} </td> <td>${r.category} </td> <td>${r.model} </td> <td>${r.material} </td> <td>${r.quantity} </td>`;
}
// Setting innerHTML as tab variable
document.getElementById("lista-material").innerHTML = tab;
}
//----------------------------------------------------------------------------------------//`
And my html page:
<script src= "js/getMaterial.js">
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Material</title>
<link rel="stylesheet" href="fo.css" type="text/css">
<link rel="stylesheet" href="headerfooter.css" type="text/css">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Add icon library -->
<script src="https://kit.fontawesome.com/2545434131.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- HEADER -->
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-none d-lg-block">
</section>
<header>
<header id="header">
<div class="container">
<div class="psp-logo float-left">
<a href="PaginaInicial.html"><img src="https://www.psp.pt//PublishingImages/logo.svg" alt="" class="paginainicial.html"></a>
</div>
<nav class= "navbar navbar-expand-lg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="material.html">MATERIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="candidatos.html">REGISTAR CANDIDATOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="operacionais1.html">OPERACIONAIS NO TERRENO</a>
</li>
<li class="nav-item">
</ul>
<div> <li id= "nr112"> 112</li>
<li id= "nremer1"> Número Europeu</li>
<li id= "nremer2"> de Emergência</li>
</div>
<button id="loginColaborator" type="button" class="btn btn-primary" ><i class="fas fa-user-tie"></i>Login </button>
</nav>
</header>
<div id="imagemfo">
</div>
<div class="margin20">
<input type="text" class="procurar" id="myInput" onkeyup="myFunction()" placeholder="Procucar por categoria">
</div>
<div class="container-fluid">
<div class="table-responsive">
<table class="table" id="lista-material1">
<thead>
<tr>
<th scope="col">CóDIGO</th>
<th scope="col">CATEGORIA</th>
<th scope="col">MODELO</th>
<th scope="col">QUANTIDADE</th>
<th scope="col">QUANTIDADE DISPONIVEL</th>
</tr>
</thead>
</table>
<div id="lista-material" v-show="visible" ref="rete"></div> </div>
</div>
</body>
</html>
When i check the console on the page it shows the array that I want and it also shows the following errors:
enter image description here
question from:
https://stackoverflow.com/questions/65883660/data-from-fetch-get-request-appears-in-console-but-not-the-page 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
