0

Tengo un archivo ajáx.php que me genera un objeto con dos campos. Lo que quiero hacer es en otro archivo llamado funciones.js que uso jquery tomas esos valores de json y pasarlos a una variable.

Codigo del archivo ajax.php

$data['hora'] = $valor[0];
$data['ppm'] = $valor[1];
echo json_encode($data);

La salida muestra: {"hora":"22:19","ppm":"125"}

yo lo que necesito es pasar esos dos datos a dos variables de jquery que estan en otro archivo .js

Lo que logre es lo siguiente:

function recogerDatos() {
           
            const xhttp = new XMLHttpRequest();

            xhttp.open('GET','assets/js/mqtt/ajax.php',true);

            xhttp.send();

            xhttp.onreadystatechange = function(){
                
                if (this.readyState == 4 && this.status == 200) {

                    console.log(this.responseText);
                    let datos = JSON.parse(this.responseText);
                    datox = [];
                    datoy= [];
                    for(let item of datos){ 
                        datox= item['hora'];
                        datox= item['ppm'];
                    }
                }
            
            }
        }
        window.setTimeout(recogerDatos, 10000);

Pero me sale el giguiente error

Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at XMLHttpRequest.xhttp.onreadystatechange (demo.js:130)

2 respuestas 2

1

Observo en tu planteamiento varios errores y términos mal empleados:

  1. Estás diciendo que la respuesta es esta: {"hora":"22:19","ppm":"125"} Si es así, estamos ante un Objeto JSON, no ante un Array JSON, por tanto, no tiene ningún sentido intentar leer ese objeto dentro de un bucle, pues NO es un array.
  2. Hablas de querer guardar los valores en dos variables, pero dichas variables las declaras como Arrays: datox = [] y datoy= [] ¿ ?

Asumiremos que tienes un entorno limpio en ajax.php. Por limpio se entiende que controlas las salidas en tu archivo y que la respuesta no viene mezclada con nada más que haría inválido el JSON. Si es así, solamente tines que hacer esto:

            if (this.readyState == 4 && this.status == 200) {
                let datos = JSON.parse(this.responseText);
                let datox = datos.hora;
                let datoy = datos.ppm;
            }

Veamos un ejemplo asumiendo la respuesta a mano aquí:

let responseText='{"hora":"22:19","ppm":"125"}';
let datos=JSON.parse(responseText);
let datox = datos.hora;
let datoy = datos.ppm;
console.log(`datox = ${datox} y datoy = ${datoy}`);

Como ves, funciona, si en tu caso no funciona, revisa las salidas en tu archivo PHP y verifica que no sale nada por pantalla aparte de la respuesta:

echo json_encode($data);

Recomendaciones

  • Si te interesa tener un doctorado en JSON, te invito a leer esta respuesta. Si entiendes lo planteado en ella, no tendrás ningún problema con ningún JSON, por complejo que éste sea. Son diez minutos de lectura que te ahorrarán muchas horas / días / semanas en el futuro.
3
  • A.Cenado Muchas gracias por la ayuda e entendido y como lo nombre al inicio de la consulta dije que era un objeto la salida, lo que nunca me di cuenta es que esa variables del objeto las quería almacenar en un arreglo. Probe su codigo y me tiro este error. Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at XMLHttpRequest.xhttp.onreadystatechange (demo.js:131) Lo que pude observar es que el responseText lo devuelve vacio Commented el 8 ago. 2021 a las 3:51
  • Si te devuelve el responseText vacío puede que haya en problema en el archivo .php , ¿hiciste algún cambio en ese archivo?
    – A. Cedano
    Commented el 8 ago. 2021 a las 4:05
  • te agregue una repuesta porque era muy larga. Commented el 8 ago. 2021 a las 13:51
0

No no realice ningun cambio es mas este es mi codigo en aja por el cual le paso la variable al php para realizar una consulta en mysql y cuando realizo el console.log(response) dentro del si todo salio bien en la salida veo todos los resultados. @A. Cedano

 action = "grafica";
        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'GET',
            async: true,
            data:{action:action,seleccion:seleccion},
            success:function(response){
                //console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        });

Demo.js

demo = {


initDocChart: function() {
    chartColor = "#FFFFFF";

    // General configuration for the charts with Line gradientStroke
    gradientChartOptionsConfiguration = {
        maintainAspectRatio: false,
        exportEnabled: true,
        legend: {
            display: false
        },
        tooltips: {
            bodySpacing: 4,
            mode: "nearest",
            intersect: 0,
            position: "nearest",
            xPadding: 10,
            yPadding: 10,
            caretPadding: 10
        },
        responsive: true,
        scales: {
            yAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }]
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 15,
                bottom: 15
            }
        }
    };
},

initDashboardPageCharts: function() {

    gradientChartOptionsConfigurationWithTooltipPurple = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },

        tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
        },
        responsive: true,
        scales: {
            yAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(29,140,248,0.0)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    suggestedMin: 60,
                    suggestedMax: 125,
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }],

            xAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(225,78,202,0.1)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }]
        }
    };

    //****************************************************
    //* aqui van los datos para la grafica del dashboard *
    //***************************************************
        
        function recogerDatos() {
           
            const xhttp = new XMLHttpRequest();

            xhttp.open('GET','assets/js/mqtt/ajax.php',true);

            xhttp.send();

            xhttp.onreadystatechange = function(){
                
                if (this.readyState == 4 && this.status == 200) {

                    console.log(this.responseText);
                    let datos = JSON.parse(this.responseText);
                    let datox = datos.hora;
                    let datoy = datos.ppm;
                    console.log(`datox = ${datox} y datoy = ${datoy}`);

                }
            
            }
        }
        window.setTimeout(recogerDatos, 10000);
    
    var datoy=[];
    var datox=[];
   //setInterval(function() {
        for(var i=0;i<=120;i++){
            datoy[i]= Math.floor((Math.random() * (1200 - 300 + 1)) + 300);
            datox[i]= i;
        }
    //console.log(datoy);
    //}, 3000);
    

    var ctx = document.getElementById("chartLinePurple").getContext("2d");

    var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
    gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

    var data = {
        labels: datox,
        datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#d048b6',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#d048b6',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#d048b6',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: datoy,
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfigurationWithTooltipPurple
    });
},

};

Luego la llamo desde funciones.js dependiendo que selecciono

$("select[name=dispositivo]").change(function() {
        seleccion = $(this).children("option:selected").val();
        console.log("Has seleccionado - " + seleccion);
        //pasamos los datos a ajax para mostrar la grafica
        action = "grafica";
        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'GET',
            async: true,
            data:{action:action,seleccion:seleccion},
            success:function(response){
                //console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        }); });
13
  • Si dices que ves los datos en el console.log no entiendo entonces cuál es el problema ¿? Por otra parte no uses el área de respuestas para aclaraciones, puedes editar la pregunta para ello.
    – A. Cedano
    Commented el 8 ago. 2021 a las 14:05
  • Claro pero el codigo de ajax lo tengo en un archivo funciones.js que pasa la variable por metodo get a ajax.php para realizar una consulta a bases de mysql para luego devolver en formato Json (Objeto) a otro archivo demo.js para tomar esos valores y manipularlos desde ahi. Que desde el demo.js el responseText lo recive vacio. y nose porque si la consulta que hago en el funciones.js con ajax esta lleno el console.log(response). Commented el 8 ago. 2021 a las 14:59
  • Es que la respuesta tienes que recibirla en el mismo archivo .js que hace la petición Ajax, o sea, en funciones.js, ¿por qué quieres leerla la respuesta en un archivo que no ha sido el que ha hecho la petición? Eso no funciona así ni tiene sentido tampoco.
    – A. Cedano
    Commented el 8 ago. 2021 a las 15:12
  • porque me gusta separar los archivos según se el contenido por ejemplo en el funciones.js analizo las acciones que hago con un select depende lo que selecciono es la búsqueda que realizo en mysql y en el demo.js tengo la programación de una gráfica, quiero recibir esos datos para gratificarlos. Commented el 8 ago. 2021 a las 15:30
  • Entiendo que quieras separar los archivos lo cual es una buena práctica. Pero lo propio sería llamar desde funciones.js al archivo demo.js y poner en este último la petición Ajax completa. Uno de los motivos para hacer esto es que Ajax es asíncrono y por tanto es mejor manejar las respuestas en el mismo archivo que hace la petición, no en otro archivo, eso no tiene sentido para fines de simplificación/organización del código. Puedes hacerlo como pretendes, si quieres, pero eso no te ayudará a organizar mejor tu código, al contrario.
    – A. Cedano
    Commented el 8 ago. 2021 a las 16:33

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.