0

Estoy armando una página con NODEJS + MYSQL + EJS. Estoy obteniendo el resultado de una consulta desde MYSQL, lo paso a la vista EJS y quiero utilizar los valores para generar un gráfico. (Soy nuevo y recién comienzo a aprender muchos conceptos tales JSON y tipos de datos)

Este es mi index.js

    var queryString = "SELECT * FROM VALORES";
    app.get('/', (req, res) => {
    connection.query(queryString, function (err, rows, fields) {
        if (err) throw err;
        res.render("index", {
            rows: rows,  //<---aca le paso el resultado de la consulta
        });
    });

El resultado de mi consulta en formato de tabla:

ID   DIA         VALOR
1   LUNES        10
2   MARTES       20
3   MIERCOLES    30
4   JUEVES       40

Mi archio index.ejs contiene:

<body>
    <H1>Bienvenido</H1>
    <p id="element">GetElementById</p>

    <div style="border:tan; border-style: solid; width: 200px; height: 100px">
        <canvas id="myChart" width="200px" height="100px"></canvas>
    </div>   
</body>
<script>    
    var rowlocal = <%-JSON.stringify(rows)%>;
    document.getElementById("element").innerHTML = (JSON.stringify(rowlocal));   
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: rowlocal[0][1],
                backgroundColor: 'rgb(255, 19, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [10, 210, 45, 52, 620, 730, 5],
            }]
        },
        options: {}
    })

</script>
</html>

Como podrán ver he asignado var rowlocal = <%-JSON.stringify(rows)%>; y solo para probar que contenía se la paso al elemento "p" de mi html <p id="element">GetElementById</p> con este código document.getElementById("element").innerHTML = (JSON.stringify(rowlocal)); dandome como resultado en mi obtengo en mi navegador web esto:

Resultado de pasar rowlocal al html

Al probar con este configuración (queriendo conocer que valores tengo) document.getElementById("element").innerHTML = rowlocal; obtengo en mi navegador web:

Previa

Mi problema surge en que no encuentro la forma de pasar los valores de las columnas DIA (lunes, martes...) y VALOR (10, 20...) a las etiquetas "labels" y "data" para generar el gráfico.

Debería recorrer el arreglo o el string e ir guardando los valores en una variable? como trabajo con eso?

Gracias de antemano!

2 respuestas 2

0

Finalmente logré hacer funcionar mi código y espero que le sirva a alguien más:

Este es mi index.js

 var queryString = "SELECT * FROM VALORES";
app.get('/', (req, res) => {
connection.query(queryString, function (err, rows, fields) {
    if (err) throw err;
    res.render("index", {
        rows: (JSON.stringify(rows)),  //<---aca le paso el resultado de la consulta
    });
});

Mi archivo index.ejs recibe:

<script>
var rowlocal = [];
rowlocal = <%-rows%>;

(((... acá formateo mis datos para generar los gráficos.... )))

</script>
0

Buenas yo tambien soy novato, y espero que te ayude para tener otra idea. En mi caso yo uso sequelize para el manejo de base de datos. Pero en mi caso yo en mi ejs lo recibo como un objeto.

exports.todo = (req, res) =>{
    modelo.findByPk(req.params.paseid) //el id a buscar en la bd
    .then(usuario => {  //una promesa que de trae el usuario de la bd
            res.render('pagina.ejs', {dato : usuario});
        }
    );
}

en si lo importante seria el res.render que es como se envian los datos y en mi archivo ejs lo recibiria asi:

<% dato.nombre %> <% dato.apellido%> etc...

ya que dato para ejs es un objeto que contiene todos los datos del usuario que busque, al menos en sequelize.

1
  • Gracias!! voy a probarlo... Commented el 26 jun. 2021 a las 16:59

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.