1

Estoy realizando un proyecto en el cual requiero mostrar el resultado de mi código JS en HTML

(Ya logro extraer los datos de la base de datos) pero el resultado de ese JS quiero reflejarlo en HTML.

Éste es mi código.

const mysql = require('mysql')

// First you need to create a connection to the database
// Be sure to replace 'user' and 'password' with the correct values
var con = mysql.createConnection({
  host: 'localhost',
  user: 'useruser',
  password: '',
  database: 'namebasedatos',    
});

con.connect((err) => {
  if(err){
    console.log('Error connecting to Db');
    return;
  }     
  console.log('Connection established');
});


con.query('SELECT id,rut FROM participantes ORDER BY rand() LIMIT 1', (err,rows) => {
  if(err) throw err;

  console.log('EL ganador es:', rows)


con.end((err) => {
  // The connection is terminated gracefully
  // Ensures all remaining queries are executed
  // Then sends a quit packet to the MySQL server.
})}); 

Quedo atento a sus comentarios, Saludos!

3
  • Cuidado! JS es igual a JavaScript lo que es diferente de Java. Eso hace que se desvíe un poco la atención en tu pregunta. Yo por ejemplo, desconozco Java pero entré porque en el título decía JS. Te sugiero editarla y aclarar ese tema.
    – DjCrazy
    Commented el 3 jun. 2023 a las 20:03
  • SI!!! disculpa, el codigo que coloque anteriomente lo reviso desde consola mediante node nombrearchivo.js el resultado que muestra el codigo anterior, necesito visualizarlo en html Commented el 3 jun. 2023 a las 20:08
  • Para mostrar eso, necesitas un servidor web que te permita "servir" tu página html que contenga los datos que has consultado. Puedes hacerlo usando el servidor incorporado http o podrías usar alguna librería o framework que lo haga un poco más fácil, como por ejemplo express. En tu código no se ve nada parecido a un servidor web. Saludos Commented el 3 jun. 2023 a las 20:22

1 respuesta 1

1

Debes crear un servidor que sea capaz de recibir solicitudes del cliente y enviar una respuesta, puedes hacerlo con 'http' que viene incorporado con NodeJS, pero lo mas sencillo es hacerlo con la libreria express. Tambien debes incorporar el middleware cors para permitir solicitudes desde dominios/puertos/protocolos diferentes a donde se ubica el servidor. Para instalar dichos modulos, en la terminal en el directorio donde este ubicada tu aplicación de Node:

npm i express
npm i cors

aquí un pequeño ejemplo de lo que podría ser tu servidor

const mysql = require('mysql')
const cors = require('cors')
const express = require('express')

const app = express() // creamos servidor de express

app.use(cors()) // usamos el middleware cors

app.get('/getproducts', (req, res) => { // controlador (el cliente debe hacer un fetch hacia esta ruta para obtener la respuesta)
  let conexion = mysql.createConnection({
    user: '***', // datos de conexion
    host: '***',
    password: '***',
    database: '***'
  })
  conexion.connect();
  conexion.query('SELECT * FROM Producto ORDER BY PRECIO DESC LIMIT 1', (err, results) => {
    conexion.end()
    if(err) res.status.send('Error en la querie') 
    res.status(200).send(results) // se envia la respuesta al cliente con el resultado de la querie
  })
})

app.listen(3002) // puerto de escucha del servidor

luego del lado del cliente, supongamos que tienes el siguiente HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Prueba</title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="result_container"> 
    <!-- aqui se insertara el resultado de la querie -->
  </div>
  <script src="scripts2.js" defer></script>
</body>
</html>

Puedes insertar los datos de la respuesta del servidor como html de la siguiente forma, usando un script:

scripts2.js:

const contenedor = document.getElementById('result_container');

fetch('http://localhost:3002/getproducts') // llamamos a la ruta del controlador
  .then(res => res.json()) 
  .then(res => {
    Object.entries(res[0]).forEach(elem => { // insertamos los datos de la respuesta en el div 'contenedor'
      contenedor.innerHTML += `<div><span>${elem[0]}:</span>${elem[1]}</div>`
    })
  })

Esto es muy general y a muy grandes rasgos, basicamente necesitas un servidor que reciba solicitudes del cliente, se pueda conectar a la base de datos para hacerle consultas y devolver los resultados de esa consulta como respuesta al cliente, luego este podrá renderizar HTML en combinación con los datos de la respuesta.

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.