htmx contra JS

Ejercicio sencillo, en el que el destino de nuestra petición GET nos devuelve código generado por una Promesa resuelta en JS

<div id="salidaJS"></div>

<button
  hx-target="#salidaJS"
  hx-get="/parts/js/"
  hx-trigger="click once"
  placeholder="cargando..."
>
Carga el contenido de /parts/js/index.html en salidaJS
</button>

/parts/js/index.html

<div id="app">resultados</div>

<script>
const fetchPromise = fetch(
"https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);

const app  = document.querySelector('#app');

fetchPromise
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    app.innerHTML = '<h2>'+data[0].name+'</h2>';
  })
  .catch((error) => {
    console.error(`Could not get products: ${error}`);
  });
</script>

En caso de no haber especificado que se ejecuta una única vez con el atributo once , lo que ocurrirá es que al pulsar el botón de nuevo, nos indicará que las variables ya están declaradas, y no se cargaría el contenido (aparece la palabra: resultados que ya teníamos escrita).

OPCIÓN: Declarar como var , no como const, y al final quitar las variables.

<script>
    // declarados como var para poder eliminarlos y que no nos diga que ya se encuentran declaradas las variables: fetchPromise y app

var fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
  );
var app = document.querySelector('#app');

  fetchPromise
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log(data[0].name);
    app.innerHTML = data[0].name;
  })
  .catch((error) => {
    console.error(`Could not get products: ${error}`);
  });
  delete fetchPromise;
  delete app;
</script>

De esta forma vuelve a realizar la petición y actualiza el contenido.

Pasando parámetros

<div hx-get="/parts/parametros/js.html" hx-vals='js:{some_key: some_value}'>Get Some HTML, Including a Dynamic Value from Javascript in the Request</div>

/parts/parametros/js.html

<script>
const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

console.log(params);

// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"

let value = params.some_key;

console.log(value); // "some_value"
</script>