0

queria saber porque razón cuando hago un json de prueba, tipo:

let test = {'Carlos': 1, 'Elias': 2}

Y lo envio a una función para crear un grafico de barras con canvas, que por cierto, seguí exactamente los pasos de este tutoria. Cuando lo hago con los datos de prueba me funciona muy bien, el resultado es algo como el siguiente:

datos de prueba

Pero cuando uso los datos de la bd si me retorna los datos, pero cuando envio el json no encuentra las llaves del json, esté es el código con el que agrego los datos:

data.response.forEach(voto => {
    Nombre = voto.Nombre.split(" ")[0];
    Nombre.toString();
    votos[`'${Nombre}'`] = voto.Votos;
    console.log(votos);
});

Deduje que el error era porque cuando creo el array de pruebas las llaves están entre comilla, pero no creo que afecte realmente, solo intente hacer algo por probar, elcódigo original solo agregaba el nombre sin las comillas, votos[Nombre] = voto.Votos

El resultado que obtengo de eso es esto, teniendo en cuenta que agregué una condición, si las llaves son menor a 1 dibuja lo siguiente:

pueba con la bd

Y no logro solucionar el error, en consola me tira:

Uncaught TypeError: myChart.draw is not a function

Que es mi función para hacer todo de la grafica, pero se que es porque directamente, no existe ``` keys.lenght`, la sección que se encarga de eso es esta:

let keys = Object.keys(this.options.data);

Pero me devuelve {} cuando consigo los datos de la bd, y me devuelve {Carlos: 1, Elias: 2} cuando es la prueba, finalmente, mi código sql es el siguiente:

SELECT candidatos.Nombre, COUNT(votaciones.Id_Votacion) AS Votos FROM candidatos, votaciones WHERE candidatos.Id_Candidato = votaciones.Id_Candidato GROUP BY candidatos.Id_Candidato

No es la gran cosa, me devuelve un diccionario como este, {'Nombre': 'Carlos Antonio Rodrigez Bazques', 'Votos': 1}, por cada usuario y luego lo agrego al json en js.

myChar, barChar es identico al de el tutorial que segí:

for (let i = 0; i < Object.keys(votos).length; i++) {
                colors.push(randomColor());
            }
            let myChart = new barChar({
                canvas: myCanvas,
                data: votos,
                padding: 25,
                gridScale: 20,
                gridColor: "#B9B6B6",
                colors: colors
            });

Manjo la bd con python, y esté es el código en python:

#Dentro de una lase cru() que maneja las consultas
def mostrar_votos(self):
        try:
            cursor = self.conn.cursor(dictionary=True)
            sql = "SELECT candidatos.Nombre, COUNT(votaciones.Id_Votacion) AS Votos FROM candidatos, votaciones WHERE candidatos.Id_Candidato = votaciones.Id_Candidato GROUP BY candidatos.Id_Candidato"
            cursor.execute(sql)
            result = cursor.fetchall()
            return result
        except mysql.connector.Error as err:
            return {'status':'error', 'msg': 'No se pudieron encontrar los votos', 'code': str(err), 'votos':{}}

#Dentro de la clase del servidor, en do_GET:
class Handler(SimpleHTTPRequestHandler):
    def do_GET(self):
        elif self.path == '/mostrar_votos':
            response = curd.mostrar_votos()
            self.send_response(200)
            self.end_headers()
            self.wfile.write(json.dumps(dict(response=response)).encode('utf-8'))

Y así llamo al la funcion desde js:

$.get("http://localhost:8000/mostrar_votos", (data)=>{
                console.log(data);
                data.response.forEach(voto => {
                    Nombre = voto.Nombre.split(" ")[0];
                    //Combertir el nombre a string
                    Nombre.toString();
                    votos[`'${Nombre}'`] = voto.Votos;
                    console.log(votos);
                });
            }, 'json');
            #Hice una prueba imprimiendo las llaves, y me devuelve [], y si imprimo solo votos si imprime el json normal.
            console.log(Object.keys(votos))
        }

Alguna idea de como lo soluciono?

2
  • Podrías mostrar dónde instancias tu objeto myChart? Uncaught TypeError: myChart.draw is not a function se refiere a que estás tratando de hacer .draw() en un objeto indefinido
    – Japsz
    el 10 nov. 2021 a las 17:06
  • Ok, actualizare la pregunta el 10 nov. 2021 a las 17:10

2 respuestas 2

1

El problema está en cómo manejas la asincronía de $.get(). Como $.get() es asincrónico (en este caso, tiene como interfaz una Promesa) este permite que se pase a la siguiente línea de código sin necesariamente haber ejecutado la función que se le entrega para procesar la respuesta.

Es por eso que el console.log(Object.keys(votos)) viene vacío, pues el callback de $.get() aún no se ejecuta.

Asegúrate de instanciar los objetos new barChart(...) luego de que tu petición se haya completado.

$.get("http://localhost:8000/mostrar_votos", (data)=>{
    console.log(data);
    data.response.forEach(voto => {
        Nombre = voto.Nombre.split(" ")[0];
        //Combertir el nombre a string
        Nombre.toString();
        votos[`'${Nombre}'`] = voto.Votos;
        console.log(votos);
    });
    for (let i = 0; i < Object.keys(votos).length; i++) {
        colors.push(randomColor());
    }
    let myChart = new barChar({
        canvas: myCanvas,
        data: votos,
        padding: 25,
        gridScale: 20,
        gridColor: "#B9B6B6",
        colors: colors
    });
    myChart.draw()
}, 'json');

sino, puedes usar $.ajax(...) con async: false para que se ejecute sincrónicamente:

$.ajax({
    type: 'GET',
    url: '/mostrar_votos',
    dataType: 'json',
    async: false,
    success: (data)=>{
        // Esto se ejecutará antes de continuar a la siguiente línea del $.ajax(...)
        console.log(data);
        data.response.forEach(voto => {
            Nombre = voto.Nombre.split(" ")[0];
            //Combertir el nombre a string
            Nombre.toString();
            votos[`'${Nombre}'`] = voto.Votos;
            console.log(votos);
        });
    }
});
// Ahora debería mostrar 'votos' con las llaves.
console.log(Object.keys(votos))

Ojo que este último modo no es compatible con dataType: 'json' ni con Cross-Domain Request. Lo que te podría traer problemas a futuro.

1
  • muchas gracias, con la primer solución se arreglo, además agredeco la explicación para tenerlo en cuenta en adelante. el 10 nov. 2021 a las 19:17
1

Con que lenguaje manejas la BD. en cuanto al codigo creo que deberias almacenar la respuesta json en una variable:

var r = data.response
r.forEach(voto => {
Nombre = voto.Nombre.split(" ")[0];
Nombre.toString();
votos[`'${Nombre}'`] = voto.Votos;
console.log(votos);

});

4
  • De acuerdo, gracias por el consejo, y manejo mi BD con python el 10 nov. 2021 a las 17:24
  • bueno yo uso php pero como tu código parece javascript, creo te funcionará. Yo he trabajado mucho con json y ajax pero no me he topado con ese ese error. el 10 nov. 2021 a las 17:30
  • Lastimosamente no me finciono :( el 10 nov. 2021 a las 17:40
  • revisaste que todo lo que reciba de la BD se envie en formato json el 10 nov. 2021 a las 18:15

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.