Estoy realizando un mini proyecto de práctica web y en JavaScript lo que hago es hacer una petinción a PHP donde hago una consulta de base de datos que me dé todas las categorías y me las almacene en un arreglo. De ahí lo envío en JSON a JavaScript.
En JavaScript lo que hago es crear etiquetas <li>
para mostrarlos.
Mi problema es que cada vez que llamo a esa petición cuando almaceno más categorías o hago clic en un botón donde muestra un modal se repiten constantemente.
No sé si hay una solución para que se limpie o se remueva todo dentro de la etiqueta <ul>
antes de llamar a la petición o algo parecido.
Mi HTML:
<form id="formAgregarCategoria" name="formAgregarCategoria" method="post">
<div class="alert alert-danger text-center" id="mensaje5" role="alert" style="display: none;"></div>
<div class="row row-cols-2 g-0">
<div class="col-5 col-lg-5">
<p>Lista de categorías</p>
<ul id="listaCategoria">
</ul>
</div>
<div class="col-7 col-lg-7">
<label for="inputCategoria" class="form-label">Categoría</label>
<input type="text" required class="form-control" name="txtCategoria" id="inputCategoria" placeholder="Categoría(protector solar, bebida)">
</div>
</div>
<div class="modal-footer mt-4">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="sumit" id="addCategoria" class="btn btn-primary">Guardar</button>
</div>
</form>
Mi JavaScript donde hago la petición:
document.getElementById('btncat').addEventListener("click", function() {
verCategorias(); })
function verCategorias() {
var ul = document.getElementById("listaCategoria");
const http = new XMLHttpRequest();
const url = '../../controlador/consultas/verCategorias.php';
http.open('POST', url);
http.send();
http.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var respuesta = JSON.parse(http.responseText);
for(var i = 0; i < respuesta.length; i++) {
var li = document.createElement("li");
li.innerHTML = respuesta[i].NomCategoria;
ul.appendChild(li);
}
}
}
Y mi PHP donde hago la consulta a mi base de datos:
<?php
include_once("../../controlador/consultas/conexion.php");
$respuesta = array();
$querySelect = "SELECT NomCategoria FROM categoria";
if($result = $cn->query($querySelect)) {
for($i = 0; $i<$result->num_rows;$i++) {
$respuesta[$i] = $result->fetch_assoc();
}
} else {
$respuesta['estado'] = "2";
}
header('Content-Type: application/json');
echo json_encode($respuesta);
Aquí muestro cada vez que hago clic para abrir el modal se repiten mis datos sin afectar mi base de datos. Cuando recargo la página aparece sin repetir: