1

Estoy intentando capturar la variable json_encode a través de jquery, pero sin ningún resultado.

Ademas de capturar dicho resultado de un archivo php, el mismo debe ser incorporado en una tabla de una pagina, es simplemente mostrar un query en una pagina php, que a su vez esta dentro de otra pagina construct en php, espero haberme explicado bien.

Este es mi código del query mysql en php riepilogo-loop.php:

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

include '../../utente/index.php';
$link = mysqli_connect("localhost", "user", "pasword", "database");
if ($link === false) {
    die("ERROR: Could not connect. " . mysqli_connect_error());
    }

$result_array = array();

$query = "SELECT usuario, fecha, codice, articolo, quantita, note, stato FROM spesa WHERE usuario = '".$username ."'";

$result = mysqli_query($link, $query);
if (mysqli_num_rows($result) > 0) {
    $item_array = array();

    while($row = mysqli_fetch_assoc($result)) {
        array_push($result_array, $row);
        }
    }
    header('Content-Type: application/json');
    echo json_encode($result_array);
    $link->close();

como resultado de echo json_encode($result_array); tengo esto:

[{"usuario":"Valter Lafratta","fecha":"16\/03\/2020","codice":"302","articolo":"Cacio Molisano Bianco Stagionato Kg. 1,5","quantita":"1","note":"TEST","stato":"CONFERMATA"},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"208","articolo":"Ciambelle pass. kg 3","quantita":"3","note":"Confermata","stato":""},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"208","articolo":"Ciambelle pass. kg 3","quantita":"3","note":"Confermata","stato":""},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"101","articolo":"Stracchino gr 100","quantita":"2","note":"ADMINISTRATOR","stato":"Confermata"},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"613","articolo":"Trofie 500 gr","quantita":"1","note":"Trofie de 500 gr","stato":"Confermata"}][{"usuario":"Valter Lafratta","fecha":"16\/03\/2020","codice":"302","articolo":"Cacio Molisano Bianco Stagionato Kg. 1,5","quantita":"1","note":"TEST","stato":"CONFERMATA"},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"208","articolo":"Ciambelle pass. kg 3","quantita":"3","note":"Confermata","stato":""},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"208","articolo":"Ciambelle pass. kg 3","quantita":"3","note":"Confermata","stato":""},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"101","articolo":"Stracchino gr 100","quantita":"2","note":"ADMINISTRATOR","stato":"Confermata"},{"usuario":"Valter Lafratta","fecha":"17\/03\/2020","codice":"613","articolo":"Trofie 500 gr","quantita":"1","note":"Trofie de 500 gr","stato":"Confermata"}]

Ahora bien, para capturar e insertar estos resultados en otra pagina tengo este código riepilogo.php:

<?php
    $content = "
                <div class='row'>
                <div class='col-xs-12'>
                <div class='box'>
                  <div class='box-header'>
                    <h3 class='box-title'>Le tue spese</h3>
                  </div>
                  <!-- /.box-header -->
                  <div class='box-body'>
                    <table id='spesa' class='table table-bordered table-hover'>
                      <thead>
                      <tr>
                        <th>Dipendente</th>
                        <th>Data</th>
                        <th>Codice Prodotto</th>
                        <th>Descrizione Prodotto</th>
                        <th>Quantità</th>
                        <th>Stato</th>
                        <th>Note</th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>

                      </tfoot>
                    </table>
                  </div>
                  <!-- /.box-body -->
                </div>
                <div>
                    <span>
                        <p><a href='create.php'>Nuova Spesa</a></p>
                    </span>
                </div>
                <!-- /.box -->
              </div>
            </div>";

include('index.php');
?>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script  type="text/javascript">

$(document).ready(function(){
    $.ajax({
        url: '../api/config/riepilogo-loop.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var usuario = response[i].usuario;
                var fecha = response[i].fecha;
                var codice = response[i].codice;
                var articolo = response[i].articolo;
                var quantita = response[i].quantita;
                var stato = response[i].stato;
                var note = response[i].note;

                var tr_str = "<tr>" +
                    "<td align='center'>" + usuario + "</td>" +
                    "<td align='center'>" + fecha + "</td>" +
                    "<td align='center'>" + codice + "</td>" +
                    "<td align='center'>" + articolo + "</td>" +
                    "<td align='center'>" + quantita + "</td>" +
                    "<td align='center'>" + stato + "</td>" +
                    "<td align='center'>" + note + "</td>" +
                    "</tr>";

                $("#spesa tbody").append(tr_str);
            } 

        }
    });
});
 </script>

La variable $content es parte de index.php, index es el archivo receptor/construct. No obtengo resultados de la ejecución del código, solo muestra los cabezales de las columnas, sin ningún tipo de data insertada, lo que me tiene un poco desconcertado es el hecho de que hay data, en todos los ejemplo que he visto, el script de jquery esta bien, pero sigo sin obtener los resultados.

UPDATE

Del archivo php que genera el mysql query y envia el paquete JSON, se elimino el siguiente codigo:

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);


if ($link === false) {
    die("ERROR: Could not connect. " . mysqli_connect_error());
    }

array_push($result_array, $row);

Se agrego la siguiente linea :

$result_array[]=$row;

Con este cambio en el archivo PHP, se envia un string JSON correcto.

Estaría muy agradecido si me pueden indicar en donde esta el error o si el código que estoy implementando esta errado.

Agradezco de antemano la ayuda recibida, comentarios y/o sugerencias serán bien recibidas.

Valter.

UPDATE 2

riepilogo-loop.php:

<?php   

include '../../utente/index.php';
$link = mysqli_connect("localhost", "user", password, "database");
$result_array = array();

$query = "SELECT usuario, fecha, codice, articolo, quantita, note, stato FROM spesa WHERE usuario = '".$username ."'";

$result = mysqli_query($link, $query);
if (mysqli_num_rows($result) > 0) {
    $item_array = array();

    while($row = mysqli_fetch_assoc($result)) {
        $result_array[]=$row;

    }
}
    echo json_encode($result_array);
    $link->close();

?>

Riepilogo.php

<?php
    $content = "
                <div class='row'>
                <div class='col-xs-12'>
                <div class='box'>
                  <div class='box-header'>
                    <h3 class='box-title'>Le tue spese</h3>
                  </div>
                  <!-- /.box-header -->
                  <div class='box-body'>
                    <table id='spesa' class='table table-bordered table-hover'>
                      <thead>
                      <tr>
                        <th>Dipendente</th>
                        <th>Data</th>
                        <th>Codice Prodotto</th>
                        <th>Descrizione Prodotto</th>
                        <th>Quantità</th>
                        <th>Stato</th>
                        <th>Note</th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>

                      </tfoot>
                    </table>
                  </div>
                  <!-- /.box-body -->
                </div>
                <div>
                    <span>
                        <p><a href='create.php'>Nuova Spesa</a></p>
                    </span>
                </div>
                <!-- /.box -->
              </div>
            </div>";

include('index.php');
?>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script  type="text/javascript">

$(document).ready(function(){
    $.ajax({
        url: '../api/config/riepilogo-loop.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var usuario = response[i].usuario;
                var fecha = response[i].fecha;
                var codice = response[i].codice;
                var articolo = response[i].articolo;
                var quantita = response[i].quantita;
                var stato = response[i].stato;
                var note = response[i].note;

                var tr_str = "<tr>" +
                    "<td align='center'>" + usuario + "</td>" +
                    "<td align='center'>" + fecha + "</td>" +
                    "<td align='center'>" + codice + "</td>" +
                    "<td align='center'>" + articolo + "</td>" +
                    "<td align='center'>" + quantita + "</td>" +
                    "<td align='center'>" + stato + "</td>" +
                    "<td align='center'>" + note + "</td>" +
                    "</tr>";

                $("#spesa tbody").append(tr_str);
            }
        }
    });
});
</script> 
8
  • El problema es que tu JSON no es válido. Puedes copiarlo y pegarlo aquí para verificar tu JSON, es inválido por la forma en que lo estás construyendo en PHP. array_push tiene ese problema. Prueba así sencillamente: while($row = mysqli_fetch_assoc($result)) { $result_array[]=$row; } y debería funcionar. De todos modos revisa el JSON que se produzca usando el enlace de más arriba. Y en el código Ajax no tienes que parsear nada, ya le indicaste en el dataType que esperas un JSON y Ajax lo traea ya parseado.
    – A. Cedano
    Commented el 19 mar. 2020 a las 13:39
  • Gracias @A.Cedano pruebo e informo, le remuevo tambien el die error de conexion a la base de datos? Gracias
    – user81375
    Commented el 19 mar. 2020 a las 13:59
  • Cuando esperas un JSON en el cliente, en caso de error puedes crear un array ("error"=>"Mensaje del error") así en la respuesta puedes verificar con if (response.error) { //hubo error } else { //no hubo error, mostrar los datos} O sea, dar coherencia al código.
    – A. Cedano
    Commented el 19 mar. 2020 a las 14:02
  • Deberías quitar también el despliegue de errores que tienes al principio, una vez el código funcione.
    – A. Cedano
    Commented el 19 mar. 2020 a las 14:05
  • @A.Cedano tengo un json positivo con el cambio en el código, pero sigue sin mostrar resultados en la pagina riepilogo.php Con respecto al array de errores, quede un poco confundido, sugieres de crear el código en el archivo que recibe el json o el que lo genera. Gracias
    – user81375
    Commented el 19 mar. 2020 a las 14:15

3 respuestas 3

2

La función json_encode() de PHP convierte el valor dado en un string en formato JSON. Por lo que al tratarlo como si fuese un objeto en el success de la llamada AJAX, no vas a poder obtener los valores.

Necesitas primero transformar la respuesta del servidor en un Objeto:

JQuery

$.ajax({
        url: '../api/config/riepilogo-loop.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            let objeto_JSON = $.parseJSON(response);

           objeto_JSON.forEach(function (elemento) {
                var usuario = elemento.usuario;
                var fecha = elemento.fecha;
                var codice = elemento.codice;
                var articolo = elemento.articolo;
                var quantita = elemento.quantita;
                var stato = elemento.stato;
                var note = elemento.note;

                var tr_str = "<tr>" +
                    "<td align='center'>" + usuario + "</td>" +
                    "<td align='center'>" + fecha + "</td>" +
                    "<td align='center'>" + codice + "</td>" +
                    "<td align='center'>" + articolo + "</td>" +
                    "<td align='center'>" + quantita + "</td>" +
                    "<td align='center'>" + stato + "</td>" +
                    "<td align='center'>" + note + "</td>" +
                    "</tr>";

                $("#spesa tbody").append(tr_str);
            }); 

        }
    });

También sustituí el bucle for por el uso de forEach() para una mayor comodidad.

Referencia: json_encode()

5
  • gracias por la respuesta, pero sigo sin obtener resultados, la tabla que debe mostrar los resultados sigue estando en blanco.
    – user81375
    Commented el 19 mar. 2020 a las 12:03
  • ¿Al hacerle un console.log() a la variable donde almacenas $.parseJSON(response) obtienes lo que esperas del servidor?
    – phpMyGuel
    Commented el 19 mar. 2020 a las 12:06
  • en blanco, no obtengo ningún resultado en la consola, pero en el archivo riepilogo-loop.php si tengo data con echo json_encode($result_array);
    – user81375
    Commented el 19 mar. 2020 a las 13:19
  • Cuando se pone dataType: 'JSON', en la petición Ajax no hay que hacer parse, Ajax parsea la respuesta. Por lo tanto esto sobra: let objeto_JSON = $.parseJSON(response); Si no funciona es porque el JSON que viene desde el servidor no sería válido. Cuando se espera un JSON desde el servidor no se pueden poner cosas como estas: die("ERROR: Could not connect. " . mysqli_connect_error()); porque en caso de error se imprimiría una cadena en pantalla que dañaría el JSON. Hay que escribir código coherente en el servidor que recoja los errores en un array y los devuelva como json.
    – A. Cedano
    Commented el 19 mar. 2020 a las 13:25
  • Te tienen que estar saliendo mensajes de error por consola que no estaría de más que nos pusieras. De todas formas si el console.log() te sale vacío es muy posible que no estés accediendo a la ruta del .php correctamente, en cuyo caso encontrarías un error 404 en consola.
    – phpMyGuel
    Commented el 19 mar. 2020 a las 13:28
0

Todo esto lo puedes hacer de una forma simple con $.getJSON(). Teniendo en cuenta que esta es tu tabla:

<table id='spesa' class='table table-bordered table-hover'>
    <thead>
        <tr>
            <th>Dipendente</th>
            <th>Data</th>
            <th>Codice Prodotto</th>
            <th>Descrizione Prodotto</th>
            <th>Quantità</th>
            <th>Stato</th>
            <th>Note</th>
        </tr>
    </thead>
</table>

Puedes hacerlo de la siguiente manera:

$.getJSON("../api/config/riepilogo-loop.php", function (json) {
    $('#spesa').append("<tbody>");
    for (var counter = 0; counter < json.length; counter++) {
        $('#spesa').append("<tr><td>" + json[counter].usuario + "</td>" +
                "<td>" + json[counter].fecha + "</td>" +
                "<td>" + json[counter].codice + "</td>" +
                "<td>" + json[counter].articolo + "</td>" +
                "<td>" + json[counter].quantita + "</td>" +
                "<td>" + json[counter].stato + "</td>" +
                "<td>" + json[counter].none + "</td></tr>");
    }
    $('#spesa').append("</tbody>");
});

Como la tabla la puse sin un tbody entonces lo primero que hago al recibir el json es agregarle dicho tbody y después hago un ciclo for que sea menos a la longitud del json y le hago un append() a el body de la tabla de todos los datos, posteriormente agrego el cierre del tbody y listo, con esto ya deberías de tener tu tabla funcionando sin problemas. $.getJSON() requiere que desde PHP conviertas el arreglo con echo json_encode($tuarreglo);.

8
  • Gracias @Eduardo por tu aporte, pero sigo sin poder mostrar el resultado en la pagina, me sigue apareciendo en blanco con solo los cabezales de la columnas. Cree un archivo test con el mismo codigo que tu sugieres e incluuyo el echo json_encode($result_array); si muestra el string json con los resultados del query, pero tambien muestra en blanco la data, solo los cabezales de las columnas.
    – user81375
    Commented el 19 mar. 2020 a las 16:03
  • De hecho te debería de funcionar sin problema alguno, alguna acción estas haciendo mal, porque si muestra el json como mencionas al recibirlo en el getjson debe funcionar sin problemas. ¿Ya probaste hacer un console.log(json); dentro del getjson para ver que llegue hay tu json sin problemas?. Commented el 19 mar. 2020 a las 16:10
  • no obtengo ningun resultado con el console, en blanco. $.getJSON("riepilogo-loop.php", function (json) { console.log(json);
    – user81375
    Commented el 19 mar. 2020 a las 16:19
  • Pues entonces todos tus errores vienen desde tu php, porque si al json no llega nada entonces tu problema esta en tu php no en tu javascript. Commented el 19 mar. 2020 a las 16:21
  • pero si fueran errores de php, no generaría el query y no mostraría el string, no se es mi percepción
    – user81375
    Commented el 19 mar. 2020 a las 16:23
0

Primeramente hay que ser consciente del contexto en el que te estás moviendo: una comunicación entre cliente y servidor en la que el cliente manda algo y espera del servidor una respuesta que en este caso debe ser un JSON (porque así lo indicaste en dataType).

Eso significa una cosa muy sencilla: pase lo que pase en el servidor, éste tiene que mandar una respuesta del tipo indicado (que es JSON en este caso), eso y nada más que eso. Y para hacerlo, tienes que dar coherencia a tu código en dos aspectos:

  1. Controlando todas las eventualidades en el código al que envías la petición mediante el parámetro url de Ajax. Significa que en ese código debes asegurar que no salga por pantalla nada, absolutamente nada distinto de lo que pides, que para este caso es un JSON.

  2. Un error que se escapa mucho, sobre todo cuando se trabaja con Ajax, es pensar que podemos usar en la petición Ajax (en el parámetro url) archivos que usamos para otros fines, como archivos del tipo index.html o archivos con formularios, etc. Eso no es posible, no se pueden mezclar las cosas, en el parámetro url de la petición no debes poner archivos que usas para otras cosas. Si ese archivo por ejemplo tiene salida por pantalla, cuando la petición tenga éxito traerá al cliente todo el contenido de ese archivo. Si lo que esperas en un JSON o un XML eso provocará un objeto no válido. Si lo que esperas es un HTML, estarás trayendo el contenido de un archivo que no nesitas realmente.

    En resumen: el archivo que se pone como parámetro en la petición Ajax, debe ser un archivo utilitario, que controle las salidad y que sirva únicamente para el transporte de datos entre el cliente y el servidor. Eso no significa que no puedas reutilizar. Tú puedes tener un archivo que gestione peticiones desde muchos puntos (por ejemplo un CRUD), pero con un estricto control del flujo de salida.

    Eso incluye, nunca mejor dicho, a los archivos que son incluidos. Por ejemplo, no debes incluir en el flujo archivos que hagan echo, die, print... o con bloques HTML. Por lo mismo, porque todo ese contenido vendrá con la petición, dañando el JSON, el XML o trayendo código HTML basura que se mostrará en el cliente.

    Me extendí un poco en ese punto porque he visto en muchas preguntas que esto no queda claro, sobre todo cuando se empieza con Ajax. Es fundamental tener claros esos dos conceptos, de lo contrario irás de bruces con Ajax, desperdiciando una de las herramientas más potentes que existe hoy día en la programación web.

Entendido eso, pasamos a cubrir esas deficiencias en tu código. Necesitas establecer en el servidor un control total del flujo de salida, particularmente importante para casos en los que trabajas con respuestas como JSON, XML u otras.

Tu código no es coherente porque deja escapar varias situaciones que pueden ser imprevisibles: si no hay conexión no hace nada (antes tenías un die que rompía la coherencia), si la consulta falla no hace nada, si no hay filas no hace nada.

Todo eso debe controlarse. Una forma de hacerlo es recogiendo mensajes con la clave error en un array, que luego puedes usar en el cliente para saber si hubo error o si trae datos.

OJO esos errores que se controlan ahí son por decirlo de alguna manera errores de lógica. Hay otro tipo de errores (de red, de servidor) que se controlan con la función error propia de Ajax y que deberías implementar cuando todo funcione, porque es la única forma de controlar errores que escapan al ámbito del código.

Por ejemplo:

PHP

<?php   
    include '../../utente/index.php';
    $link = mysqli_connect("localhost", "user", password, "database");
    $result_array = array();
    if ($link) {
        $query = "SELECT usuario, fecha, codice, articolo, quantita, note, stato FROM spesa WHERE usuario = '".$username ."'";

        if ($result = mysqli_query($link, $query)) {
            if (mysqli_num_rows($result) > 0) {     
                while($row = mysqli_fetch_assoc($result)) {
                    $result_array[]=$row;
                }
            }else{
                $result_array["error"]="No se encontraron filas";       
            }

        }else{
            $result_array["error"]="La consulta es errónea";        
        }   
        $link->close();
    }else{
        $result_array["error"]="No hay conexión";       
    }
    header("Content-type: application/json; charset=utf-8");
    echo json_encode($result_array);
?>

Javascript

Como ya dije, si pones esto dataType: 'JSON' no necesitas hacer un parseo (hacerlo daría más bien error), pues ya Ajax hará el parseo.

Para completar la coherencia con lo que escribiste en el servidor, sólo hay que hacer esto:

    success: function(response){
         if (response.error) {
            //Hay mensajes con la clave error, mostrarlos o hacer otra cosa
         }else{
            //Hay datos, leerlos
         }

Con eso el código debe funcionar. O decir lo que ha causado su no funcionamiento. Puedes depurar con console.log o de otro modo.

8
  • Gracias nuevamente, déjame verificar y aviso.
    – user81375
    Commented el 19 mar. 2020 a las 16:36
  • Pues nada, todo en blanco, sin registros en la consola, pero el echo json_encode($result_array); sigue generando data, pero simplemente no se muestra en riepilogo.php
    – user81375
    Commented el 19 mar. 2020 a las 16:46
  • ¿Qué datos muestra @Valter? Haz un console.log(response); en el success
    – A. Cedano
    Commented el 19 mar. 2020 a las 16:49
  • ejecute el archivo riepilogo-loop.php directamente en el browser, le retire la linea del codigo: include'../../utente/index.php y genero este error {"error":"No se encontraron filas"}
    – user81375
    Commented el 19 mar. 2020 a las 16:51
  • ¿Y dejándole ese archivo qué arroja?
    – A. Cedano
    Commented el 19 mar. 2020 a las 16:57

Tu Respuesta

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