Pass data via ajax and php to an HTML table

Question

Pass data via ajax and php to an HTML table

Navigation

#1 by (1 votes)

0

I try to fill a table in html from a query ajax and php .

Problem: I want to get the dependencies of a MySQL table (I only have one added). But in php I input an array to return it to me in the 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);               
        }

?>

At the time of receiving the data in ajax is done correctly, but when I want to fill some field of my table I have the following problem:

As an additional note I am using the function .each of 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");
});
}

The result is as follows:

Problem Case # 2: If I make some modifications in the script where I have the ajax:

Modified code 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");
});
}

I modified the parameters of the .each() function by adding only data .

I just want to get the data without being quadrupled.

The result is as follows :

The structure of objeto json is as follows:

jquery html php json ajax

asked by Ferny Cortez 29.12.2017 в 04:38

source

1 answer

HIBERNATE JPA POSTGRESQL, error in Persistence.xml To extract information from a table?

score 1 · Accepted Answer

The problem is that you are going through the object test like this:

/*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>

This way it would not be in order with the table, what you should do would be to order this:

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

In the same order of the table, or vice versa.