1

Intento llenar una tabla en html desde una consulta ajax y php.

Problema: Quiero obtener las dependencias de una tabla de MySQL (Solo tengo una agregada). Pero en php ingreso un array para que me lo devuelva en el ajax.

clases.php

<?php
if ($num_rows>=1) {
            //Se obtienen los resultados de la consulta
            while ($this->consulta->fetch()) {
                if($id_Estado == 1){
                    //Se guardan los datos en un arreglo
                $datos_json = array("Id_Dependencia"=>$id_dependencia ,"Nombre_Dependencia"=>$nombre_dependencia, "Id_Estado"=> $id_Estado, "Estado"=>"Activo");
                }else{
                    $datos_json = array("Id_Dependencia"=>$id_dependencia,"Nombre_Dependencia"=>$nombre_dependencia, "Id_Estado"=> $id_Estado, "Estado"=>"Inactivo");
                }
            }
            header('Content-type: application/json; charset=utf-8');
            //Se devuelve el array pasado a JSON como objeto
            echo json_encode($datos_json, JSON_FORCE_OBJECT);               
        }

?>

Al momento de recibir los datos en el ajax se hace correctamente, pero cuando quiero llenar algún campo de mi tabla tengo el siguiente problema:

Como nota adicional estoy utilizando la funcion .each de JQuery.

ajax.js

function todasLasDependencias(){
$.ajax({
    url: '../../php/instancias.php',
    type: 'POST',
    data: {Funcion: 'Dependencias-todas'},
})
.done(function(data) {

    var tbHtml='';

    //Esta funcion recorre el array JSON devuelto por la consulta
    $.each(data.Nombre_Dependencia, function(index, val) {
        //Se asigna en una variable lo que sera nuestra tabla
        tbHtml +="<tr><th scope='row'>"+data.Nombre_Dependencia[index]+"</th></tr>";
    });

    $('#bodyTable-ND').append(tbHtml);
})
.fail(function() {
    console.log("error");
});
}

El resultado es el siguiente: introducir la descripción de la imagen aquí

Problema Caso #2: Si hago unas modificaciones en el script donde tengo el ajax :

Código modificado ajax.js

function todasLasDependencias(){
$.ajax({
    url: '../../php/instancias.php',
    type: 'POST',
    data: {Funcion: 'Dependencias-todas'},
})
.done(function(data) {

    var tbHtml='';

    //Esta funcion recorre el array JSON devuelto por la consulta
    $.each(data, function(index, val) {
        //Se asigna en una variable lo que sera nuestra tabla
        tbHtml +="<tr><th scope='row'>"+data.Nombre_Dependencia[index]+"</th></tr>";
    });

    $('#bodyTable-ND').append(tbHtml);
})
.fail(function() {
    console.log("error");
});
}

Modifiqué los parametros de la funcion .each() agregando solamente data.

Yo solo quiero obtener los datos sin que se cuatripliquen.

El resultado es el siguiente: introducir la descripción de la imagen aquí

La estructura del objeto json es la siguiente:

introducir la descripción de la imagen aquí

4
  • muestra con que estructura queda el resultado de la consulta, al llegar al JavaScript (data) por que de eso depende como debas recorrerlo para usarlo.
    – Michael
    el 29 dic. 2017 a las 13:59
  • @Michael Eso de la estructura,¿Qué vendría a ser?, ¿La estructura del array? el 29 dic. 2017 a las 15:35
  • Imprima en la consola la variable data que recibe en .done y mire el formato, por que desde PHP lo esta enviando como una cadena (JSON.encode). En ese caso debería de usar JSON.parse para pasarla a object en JS (recuerde que con .each no se puede recorrer un object). y debería de cambiar su th(este solo se usa para la cabecera de la tabla) por td(este para el cuerpo de la tabla)
    – Michael
    el 29 dic. 2017 a las 15:56
  • @Michael acabo de editar y poner una imagen de la consola el 29 dic. 2017 a las 16:12

2 respuestas 2

2

El problema es que esta recorriendo mal el object pruebe así:

/*este seri el object ejemplo*/
var data = {
  Estado: "activo",
  Id_Dependencia: 1,
  Id_Estado: 1,
  Nombre_Dependencia: "Sistemas"
}

/*crea la variable y abre el <tr>*/
var tbHtml = '<tr>';

/*recorre el object y agrega a tbHtml los <td>*/
for (var dato in data){
  tbHtml += '<td>' + data[dato] + '</td>'
}

/*cierra el <tr>*/
tbHtml += '</tr>';

/*agrega tbHtml al DOM*/
$('table tbody').html(tbHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th>#</th>
      <th>Dependencia</th>
      <th>Estado</th>
    </tr>
   </thead>
  <tbody></tbody>
</table>

Así no le quedaria en orden con la tabla, lo que debe de hacer seria ordenar esto:

$datos_json = array( "Id_Dependencia"=>$id_dependencia, "Nombre_Dependencia"=>$nombre_dependencia, "Id_Estado"=> $id_Estado, "Estado"=>"Inactivo" );

En el mismo orden de la tabla, o viceversa.

4
  • Y si solamente quisiera los nombre? como podria ser el 29 dic. 2017 a las 16:41
  • @FernyCortez que nombres?
    – Michael
    el 29 dic. 2017 a las 16:44
  • @Solo el nombre de las dependencias, osea no imprimir todos los datos del array el 29 dic. 2017 a las 16:52
  • en ese caso ya no debería recorrerlo, si no agregar uno a uno, para que pueda seleccionar cuales si y cuales no. <td>data['estado']</td><td>data['Id_Estado']</td>....
    – Michael
    el 29 dic. 2017 a las 17:01
1

Lo que falla es la parte de javaScript, tu código no es correcto, te lo adjunto modificado:

function todasLasDependencias(){
$.ajax({
    url: '../../php/instancias.php',
    type: 'POST',
    data: {Funcion: 'Dependencias-todas'},
})
.done(function(data) {

    var tbHtml='';

    //Esta funcion recorre el array JSON devuelto por la consulta
    let indice = 1;
    for(aux in data){
       //Esto se corresponde a cada fila de la tabla
       tbHtml +=`<tr>
                     <th scope='row'>${indice++}</th>
                     <th scope='row'>${aux["Estado"]}</th>
                     <th scope='row'>${aux["Nombre_Dependencia"]}</th>
                 </tr>`;
    }

    $('#bodyTable-ND').append(tbHtml);
})
.fail(function() {
    console.log("error");
});
}

Un saludo.

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.