0

Mostrar por separado todos los registros que tengo en mi BD relacionados a un dato, en un tabla HTML usando JavaScript y PHP.

¡Hola, a tod@s!

Estoy tratando de encontrar la instrucción para separar y mostrar en una tabla HTML, cada registro que se relaciona con otro registro que tengo en mi BD. Estoy trabajándolo con JavaScript y PHP, ¿alguien puede ayudarme y guiarme para trabajarlo y llegar al resultado?. introducir la descripción de la imagen aquí

Las herramientas que estoy usando para el ejemplo, es servidor local XAMPP, HTML, PHP, MySQL y JavaScript.



Base de Datos (base.sql)

- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 17-10-2024 a las 18:52:12
-- Versión del servidor: 10.4.32-MariaDB
-- Versión de PHP: 8.1.25

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `proyecto`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `base`
--

CREATE TABLE `base` (
  `ID` int(250) NOT NULL,
  `CLAVE` varchar(150) NOT NULL,
  `DESCRIPCION` varchar(250) NOT NULL,
  `UM` varchar(250) NOT NULL,
  `LOTE` varchar(250) NOT NULL,
  `CADUCIDAD` varchar(250) NOT NULL,
  `EXISTENCIA` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Volcado de datos para la tabla `base`
--

INSERT INTO `base` (`ID`, `CLAVE`, `DESCRIPCION`, `UM`, `LOTE`, `CADUCIDAD`, `EXISTENCIA`) VALUES
(1, '22', 'Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.', 'Envase con 100 g.', '403402041B', '31-ago-25', '4030'),
(2, '22', 'Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.', 'Envase con 100 g.', 'A304003', '30-abr-25', '1792'),
(3, '22', 'Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.', 'Envase con 100 g.', 'E404019', '31-ene-26', '1792'),
(4, '1956', 'Amikacina. Solución inyectable, cada ampolleta o frasco contiene: Sulfato de amikacina equivalente a 500 mg de amikacina.', 'Envase con 1 ampolleta o frasco con 2ml.', 'R23J03', '30-jun-25', '5516'),
(5, '1956', 'Amikacina. Solución inyectable, cada ampolleta o frasco contiene: Sulfato de amikacina equivalente a 500 mg de amikacina.', 'Envase con 1 ampolleta o frasco con 2ml.', 'R23U49', '31-jul-25', '4801');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `base`
--
ALTER TABLE `base`
  ADD PRIMARY KEY (`ID`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `base`
--
ALTER TABLE `base`
  MODIFY `ID` int(250) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

CONEXION A MI BD (dbcontroller.php)

<?php
class DBController {
  private $host = "localhost";
  private $user = "root";
  private $password = "";
  private $database = "*";
  private $conexion;
  
  function __construct() {
    $this->conexion = $this->connectDB();
  }
  
  function connectDB() {
    $conexion = mysqli_connect($this->host,$this->user,$this->password,$this->database);
    return $conexion;
  }
  
  function runQuery($query) {
    $result = mysqli_query($this->conexion,$query);
    while($row=mysqli_fetch_array($result)) {
      $resultset[] = $row;
    }
    if(!empty($resultset))
      return $resultset;
  }
  
  function insertQuery($query) {
      mysqli_query($this->conexion, $query);
      $insert_id = mysqli_insert_id($this->conexion);
      return $insert_id;
  }
  
  function getIds($query) {
      $result = mysqli_query($this->conexion,$query);
      while($row=mysqli_fetch_array($result)) {
          $resultset[] = $row[0];
      }
      if(!empty($resultset))
          return $resultset;
  }
  
   function numRows($query) {
        $result  = mysqli_query($this->conexion, $query);
        $rowcount = mysqli_num_rows($result);
        return $rowcount;
    }
}
?>

Selección de datos a mi BD (dato1.php)

 <?php
if (isset($_GET['term'])){
    # conectare la base de datos
 include('dbcontroller.php');
$db_handle = new DBController();

$return_arr = array();
$array=[];

$sqlc = "SELECT * FROM base WHERE  CLAVE like '%".$_GET['term']."%'";

$faq = $db_handle->runQuery($sqlc);


foreach($faq as $k=>$v) {
/* Recuperar y almacenar en conjunto los resultados de la consulta.*/       
    $row_array['value']= $faq[$k]['CLAVE'];
    $row_array['CLAVE']=$faq[$k]['CLAVE'];
    
    $row_array['DESCRIPCION']=$faq[$k]['DESCRIPCION'];
    $row_array['UM']=$faq[$k]['UM'];
    $row_array['ID']=$faq[$k]['ID'];
    //$row_array['CLAVE']=$faq[$k]['CLAVE'];
    $row_array['LOTE'][]=$faq[$k]['LOTE'];
    $row_array['CADUCIDAD'][]=$faq[$k]['CADUCIDAD'];
    $row_array['EXISTENCIA'][]=$faq[$k]['EXISTENCIA'];
    
    
    $return_arr[""] = $row_array;
}
/* Codifica el resultado del array en JSON. */
echo json_encode($return_arr);
}
?>

Intefaz (salidax3.php)

<?php
$conexion=mysqli_connect('localhost', 'root', '', '*');
?>

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GUI</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="prueba.css">

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="http://code.jquery.com/jquery-1.0.4.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />

  <!--SCRIPT-->
  <script type="text/javascript">
    $(function() {
      $("#CLAVE").autocomplete({
        source: "dato1.php",
        minLength: 2,
        select: function(event, ui) {
          event.preventDefault();
          $('#clave1').val(ui.item.clave1);
          $('#DESCRIPCION').val(ui.item.DESCRIPCION);
          $('#UM').val(ui.item.UM);
          $('#ID2').val(ui.item.ID2);
          $('#CLAVE2').val(ui.item.CLAVE2);
          $('#LOTE').val(ui.item.LOTE);
          $('#CADUCIDAD').val(ui.item.CADUCIDAD);
          $('#EXISTENCIA').val(ui.item.EXISTENCIA);


          $("#CLAVE").focus();
        }
      });
    });
  </script>
  
  <!-------------->
  <script type="text/javascript">

    $(buscar_datos());
    function buscar_datos(consulta){
      $.ajax({
        url: 'dato1.php',
        type: 'POST',
        dataType: 'html',
        data: {consulta: consulta},
      })
      .done(function(respuesta){
        $("#datos").html(respuesta);
      })
      .fail(function(){
        console.log("error");
        
      })
    } 
  </script>
</head> 

<body>
  <h1 align="center"></h1>
  <div class="container">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">   
      <div class="card-group mt-3">

        <div class="row">
          <div class="col-3">
            <div class="card text-center border-info">
              <div class="card-body">
                <h4 class="card-title">-</h4>
              </div>
            </div>   
          </div>

          <div class="col-9">
            <div class="card text-center border-info">
              <div class="card-body">
                <h4 class="card-title"></h4>
                <br>
                <form action="" method="POST" class="row g-3">
                 <!------->
                 <div class="row mb-3">
                  <br>
                  <br>
                  <div class="col-sm-2">
                    <label for="inputCity" class="form-label">CLAVE</label>
                    <input type="text" name="CLAVE"class="form-control" id="CLAVE">
                  </div>
                  <div class="col-sm-8">
                    <label for="inputState" class="form-label">DESCRIPCION</label>
                    <input type="text" name="DESCRIPCION" class="form-control" id="DESCRIPCION">
                  </div>
                  <div class="col-sm-2">
                    <label for="inputZip" class="form-label">U.M.</label>
                    <input type="text" name="UM" class="form-control" id="UM">
                  </div>
                  <hr>
                  <!--TABLA-->
                  <div class="container">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">LOTE</th>
                          <th scope="col">CADUCIDAD</th>
                          <th scope="col">EXISTENCIA</th>
                      
                          </tr>
                        </thead>

                        <tbody>
                          <tr>
                           <th><input type="text" name="LOTE" id="LOTE"></input> 
                             <th><input type="text" name="CADUCIDAD" id="CADUCIDAD"></th>
                             <th><input type="text" name="EXISTENCIA" id="EXISTENCIA"></th>
                           </tr>
                           <tr>
                            <th><input type="text" name="LOTE" id="LOTE"></th>
                            <th><input type="text" name="CADUCIDAD" id="CADUCIDAD"></th>
                            <th><input type="text" name="EXISTENCIA" id="EXISTENCIA"></th>
                          </tr>
                          <tr>
                            <th><input type="text" name="LOTE" id="LOTE"></th>
                            <th><input type="text" name="CADUCIDAD" id="CADUCIDAD"></th>
                            <th><input type="text" name="EXISTENCIA" id="EXISTENCIA"></th>
                          </tr>
                        </tbody>

                      </table>
                    </div>
                    <br>
                    <div class="">
                    </div>
                    <br>
                  </form>

                </div>
              </div>   
            </div>
          </div> 
        </div>      
        <br>
        <!--SCRIPT-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
      </body>
      </html>

      <!------->
      <script src="js/jquery.min.js"></script>
      <script src="js/main.js"></script>
      <!------->
    </body>
    </html>
2
  • Debes aprender a debugear lo que haces. Una línea antes del echo json_encode($return_arr); escribe esto: file_put_contents('debug_array.txt', print_r($return_arr, true)); y ejecútalo una vez, luego te vas a la carpeta donde esté el archivo que estás ejecutando y mira si te ha creado el archivo debug_array.txt y examinas su contenido, a ver si aparece todo tal como pretendes, y si es así aprende a tratarlo después. Y sino entonces revisa tu código antes de eso hasta que aparezca como tu quieres.
    – masterguru
    Commented el 17 oct. a las 20:58
  • Hola, @masterguru. Gracias por tu guía, ya agregué la línea de código que me escribiste, corrí mi código y sí me aparece el archivo debug_array.txt. Voy a revisar para adecuarlo a mi código, gracias.
    – hugo raher
    Commented el 17 oct. a las 23:03

1 respuesta 1

0

Por lo que entiendo quieres que tu JSON en lugar de devolverte esto:

{
  "": {
    "value": "22",
    "CLAVE": "22",
    "DESCRIPCION": "Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.",
    "UM": "Envase con 100 g.",
    "ID": "3",
    "LOTE": [
      "403402041B",
      "A304003",
      "E404019"
    ],
    "CADUCIDAD": [
      "31-ago-25",
      "30-abr-25",
      "31-ene-26"
    ],
    "EXISTENCIA": [
      "4030",
      "1792",
      "1792"
    ]
  }
}

te devuelva esto:

[
  {
    "ID": "1",
    "CLAVE": "22",
    "DESCRIPCION": "Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.",
    "UM": "Envase con 100 g.",
    "LOTE": "403402041B",
    "CADUCIDAD": "31-ago-25",
    "EXISTENCIA": "4030"
  },
  {
    "ID": "2",
    "CLAVE": "22",
    "DESCRIPCION": "Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.",
    "UM": "Envase con 100 g.",
    "LOTE": "A304003",
    "CADUCIDAD": "30-abr-25",
    "EXISTENCIA": "1792"
  },
  {
    "ID": "3",
    "CLAVE": "22",
    "DESCRIPCION": "Caseinato de calcio en Polvo. Cada 100 g contienen: Proteínas 86.0 g a 90.0 g. Grasas 0.0 a 2.0 g. Minerales 3.8 a 6.0 g. Humedad 0.0 a 6.2 g.",
    "UM": "Envase con 100 g.",
    "LOTE": "E404019",
    "CADUCIDAD": "31-ene-26",
    "EXISTENCIA": "1792"
  }
]

Para eso utiliza $row = mysqli_fetch_assoc($result) en lugar de mysqli_fetch_array en tu función runQuery, y ya te devolverá los registros en un array con todas sus claves. No necesitas el foreach final, devuelves los datos directamente echo json_encode($faq).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.