0

Estoy trabajando en un proyecto en el cual quiero implementar la reutilización de código en Javascript y PHP, pero me encontrado con el siguiente problema:

Deseo obtener los datos de una consulta SQL en PHP y almacenarlos con la función fetchALL() y enviarlos a Javascript mediante $.ajax() y ya con los datos recorrer las filas y obtener los datos de las columnas, en este punto debo mencionar que requiero recorrer el largo de cada fila sin conocer el nombre de sus columnas, ya que deseo implementar el código para obtener la información de diferentes tablas (reutilizar código)

Código de la consulta SQL

public function getDataTable($tabla){
    $conexion = ConnectionBD::getCurrentInstance();  
    try {
        $conexion->Connect();
        $conexion->pdo->beginTransaction(); 
        $conexion->querySQL = 'SELECT * FROM '.$tabla;
        $statement = $conexion->pdo->prepare($conexion->querySQL);
        $statement->execute();
        $resultado = $statement->fetchAll();
        echo json_encode($resultado, JSON_FORCE_OBJECT);
        $conexion->pdo->commit();
        $conexion->CloseConnection();                     
    } catch (Exception $e) {
        die("Error: ".$e->getMessage());
        $conexion->pdo->rollBack();
    }
}

Llamada a la función de la consulta SQL

$tabla = $_POST['Tabla'];
if(isset($tabla)){    
  ConsultasSQL::getCurrentInstance()->getDataTable($tabla);
}else{
  echo "Error";
}

Código Javascript

const datos_tablas = (tabla, _URL) => {
$.ajax({
        type: "POST",
        url: _URL,
        data: {
            Tabla: tabla
        }
    })
    .done(data => {
        //Deseo Recorrer la fila y columnas del data
    })

.fail(data => {
    console.log("Error al datos de los contadores");
});
}

2 respuestas 2

1

Asumiendo que el resultado de la consulta sea el siguiente:

[
 {
  "id": "1",
  "first_name": "John",
  "last_name": "Doe"
 },
 {
  "id": "2",
  "first_name": "Jane",
  "last_name": "Foo"
 }
]

Entonces debes

  1. Parse'ar con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. Una vez realizado paso 1 y 2 ya puedes mostrar el resultado recorriendo con for( .. of ..).

Para tal caso puedes copiar esta función JsonToTable(.. , ..) dentro de tu done la cual recibe un String con los datos y el id de la tabla donde se mostrarán:

function JsonToTable(response, table){
  // paso string a json
  let data = JSON.parse(response)

  // obtengo y limpio mi tabla
  let tabla = $(table)
  tabla.empty()

  // para agregar columnas a thead
  let heads = Object.keys(data[0])
 
  for( head of heads){
   tabla.append('<th>'+head+'</th>')
  }
  // para agregar datos a tbody
  for( row of data){
   let datos = '';
   for(column of heads){
     datos += '<td>'+row[column]+'</td>'
   }
   tabla.append('<tr>'+datos+'</tr>')
  }
}
<textarea id="response">
[{"id": "1","first_name": "John","last_name": "Doe"},{"id": "2","first_name": "Jane","last_name": "Foo"}]
</textarea>

<table id="mytabla">
<thead><th>demo</th></thead>
<tbody><tr></tr><tbody>
</table>

<button onclick="JsonToTable(response.value,'#mytabla')">Consultar</button>


<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Alternativa con JqGrid

Una alternativa es usar la libreria JqGrid la cual permite crear tablas dinámicas de datos con los resultados de respuesta JSON. Mira a ejemplo en: http://www.guriddo.net/demo/bootstrap/

2
  • Tengo algunas dudas tecnicas, $(table) el símbolo dolar que trata de decir Commented el 28 sept. 2020 a las 1:20
  • 1
    La función JsonToTable recibe como segundo parámetro un string con el selector de la tabla , al llamarlo con onclick="JsonToTable(response.value,'#mytabla') entonces la variable table es '#mytabla' ( osea buscara id="mytabla"), entonces cuando hago $(table) es como si realizara $('#mytabla') y cuando hago $(table+ > ' thead') e equivalente a $('#mytabla > thead').
    – Diego Mesa
    Commented el 1 oct. 2020 a las 2:26
1

Necesitas definir un arreglo para guardar las columnas y recorrer alguno de los registros obtenidos para buscarlas, usando el ciclo for( ... in ...); ejemplo:

// Arreglo para guardar columnas
let cols = [];
// Obtener columnas recorriendo la primera fila
for(let col in data[0]) {
    cols.push(col);
}

Por supuesto, eso no es suficiente, hay que analizar el uso que le vas a dar; suponiendo que es para mostrar columna: valor, usarías algo como esto:

let data = [
  {nombre: 'Juan', puesto:'Cobrador', sueldo: 1234},
  {nombre: 'Paco', puesto:'Gerente', sueldo: 3210},
  {nombre: 'Pedro', puesto:'Vendedor', sueldo: 2345},
];
// Almacenar columnas en un arreglo
let cols = [];
let html = '';

// Verificar que hay datos para mostrar
if(data.length > 0) {
  // Obtener columnas recorriendo la primera fila
  for(let col in data[0]) {
    cols.push(col);
  }
  // Recorrer datos obtenidos
  data.forEach(dato => {
      html += '<p>';
      // Recorrer columnas
      cols.forEach(col => {
          // Mostrar columna y valor
          html += `<span>${col}: ${dato[col]}</span>`;
      });
      html += '</p>';
  });
}
document.querySelector('#datos').innerHTML = html;
#datos > p > span {
  background:#ddd;
  margin:0 10px;
}
<div id="datos"></div>

1
  • En teoría el arreglo está implícito en el data de mi función .done() porque lo obtengo haciendo la petición por ajax al php Commented el 27 sept. 2020 a las 5:41

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.