1

Quiero pasar datos de una función de node js a una plantilla de html.

La plantilla es html plano, donde el tengo que pasar la versión del programa que viene dado por un JSON tomado con nodejs.

La función nodejs es la siguiente:

app.post('/get-version', (req, res) => {
        res.json(get-version());
    });

Estoy medio perdido para hacer la llamada desde el html a esa función y poder insertar el dato en un título:

<h1>Programa <small>V 1.1.0</small></h1>

En lugar de 1.1.0, debería ir la versión del programa, el cuál se devuelve en un JSON de la siguiente manera:

}
     "version": "2.3.4"
}

1 respuesta 1

0

PROBLEMA

Se desea realizar una llamada Ajax a un método de un servidor NodeJS. El resultado debe mostrarse en un elemento del documento html que hace la llamada.

SOLUCIÓN

Existen muchas formas de hacerlo, lo que necesitas es implementar alguna de tantas. Por ejemplo, podrías usar la API Fetch.

Pero el primer detalle que voy a intentar corregir en tu método es que el mismo está escrito usando el verbo POST:

app.post('/get-version', (req, res) => {
    res.json(get-version());
});

Si bien, esto podría funcionar, es anti natural ya que el propósito de la misma url implicada en este método no es recibir datos para crear un nuevo recurso (ver CRUD), sino al contrario, solicitar un recurso.

Entonces, lo más adecuado sería usar un método del tipo GET.

También, podemos hacer un cambio en la url, ya que la misma debería representar la entidad a la que estamos haciendo referencia y no la acción sobre la misma. La acción la expresamos mediante uno de los verbos: GET, POST, PUT, DELETE, etc.

Mi propuesta es que uses el siguiente método en tu aplicación:

app.get('/version', (req, res) => {
    res.json(get-version());
});

Así, seremos consistentes con el método y el recurso solicitado.

Por último, sin saber exactamente dónde se ejecuta tu aplicación y si la misma está configurada en un puerto específico (distinto del puerto 80 para http o 443 para https), debemos tener a mano la URI correcta para consumir el recurso representado por /version.

Supongamos que tienes tu aplicación Express (NodeJS) en el puerto típico: 3000. Por lo tanto el acceso a la raíz de la misma sería: http://localhost:3000. Así, si deseamos la versión de la aplicación, que se resuelve mediante la ruta /version, tenemos que la URI a consumir sería: http://localhost:3000/version.

Una forma en que puedes mostrar la información devuelta por dicha ruta sería mediante la siguiente llamada AJAX usando la API Fecth:

let URI = 'http://localhost:3000/version'
fetch(URI)
  .then(response => response.json())
  .then(json => {
    document.getElementById('version').innerText(json.version);
  })
  .catch(error => {
    console.log(`Error al intentar la solicitud: ${error.message}`);
    document.getElementById('version').innerText(undefined);
  });

Para que esto funcione puedes hacer dos cosas: usar un botón para que la acción se ejecute a petición del usuario o hacer la solicitud apenas se cargue el contenido de la página web. Para ello, el script debes colocarlo al final de tu documento html justo antes del cierre de la etiqueta </body>. También es importante recalcar que debemos identificar el elemento que deseamos reciba el valor de nuestra respuesta. En este caso hemos establecido un atributo id sobre el elemento: <small id="version"></small>

Por ejemplo:

<body>
<h1>Programa <small id="version"></small></h1>
<script>
let URI = 'http://localhost:3000/version'
fetch(URI)
  .then(response => response.json())
  .then(json => {
    document.getElementById('version').innerText = json.version;
  })
  .catch(error => {
    console.log(`Error al intentar la solicitud: ${error.message}`);
    document.getElementById('version').innerText = undefined;
  });
</script>
</body>

Un ejemplo de esto, usando la API de randomuser.me, sería el siguiente:

<body>
<h1>Programa <small id="version"></small></h1>
<script>
let URI = 'https://randomuser.me/api/?inc=gender,name,nat&nat=ES';
fetch(URI)
  .then(response => response.json())
  .then(json => {
    
 let version = json.info.version;   document.getElementById('version').innerText = `V ${version}`;
  })
  .catch(error => {
    console.error(error);
    console.log(`Error al intentar la solicitud: ${error.message}`);
    document.getElementById('version').innerText = '<Valor por defecto>';
  });
</script>
</body>

Un ejemplo de la respuesta de la llamada la API de randomuser.me es la siguiente:

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "Mr",
        "first": "Marc",
        "last": "Ferrer"
      },
      "nat":"ES"
    }
  ],
  "info": {
    "seed": "e92f4d9ca8229707",
    "results": 1,
    "page": 1,
    "version": "1.3"
  }
}

De allí que saquemos el valor de la versión del programa usando:

json.info.version

Espero que esto te ayude a resolver el problema y deje un poco más claros ciertos conceptos.

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.