Html dinamico in javascript, consigli su librerie

**fermat** · 19-03-2024, 10:02

ciao!

mi hanno commissionato di scrivere alcune pagine in html in cui popolare alcune parti prendendo dei dati da una api.
i dati mi arrivano in formato json.
con fetch recupero i dati, ma poi come li rendo nella pagina?
vorrei evitare di scrivere tutto il codice html dentro il file js.

ho visto che ci stanno svariati template engine, tipo mustache, ma tutti sostanzialmente consigliati in ambito node.js.
io invece devo scrivere dei semplici html con javascript plain.

ovviamente non posso usare angular/react o cose del genere.

voi cosa mi consigliate??

**alka** · 19-03-2024, 12:23

Io darei un'occhiata ad Alpine.js oppure htmx: sono perfetti per questo tipo di impieghi.

**fermat** · 19-03-2024, 12:26

ciao!

grazie alka, penso che addirittura li avevo testati tempo fa, ma li avevo rimossi.
faccio qualche test e ti aggiorno!

**fermat** · 20-03-2024, 10:48

ciao!

mi sono trovato meglio con alpine.js.
ho avuto un attimo di difficoltà a capire il funzionamento generale, ma mi sembra che ci sono.

vi lascio un esempio per i posteri:

codice:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">


    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>


  <body>
    <div x-data="{ title: setHeader() }">
      <div x-html="title"></div>
    </div>


    <hr>


    <div x-data="initData()" x-init="getData()">
      USERS LIST
      <ul>
        <template x-for="item in items" :key="item.id">
          <li>
            <span class="" x-text="item.titolo"></span>
          </li>
        </template>
      </ul>
    </div>


    <script>
      function setHeader() {
        return '<h1>HEADER</h1>';
      }


      function initData() {
        const url = "https://www.mattepuffo.com/api/blog/articoli/get.php?last=10";
        return {
          isLoading: false,
          items: [],
          getData() {
            this.isLoading = true;
            fetch(url)
                .then((response) => response.json())
                .then((data) => {
                  this.items = data.articoli;
                  this.isLoading = false;
                });
          }
        }
      }
    </script>


  </body>


</html>

**alka** · 20-03-2024, 12:33

Originariamente inviata da fermat

mi sono trovato meglio con alpine.js.
ho avuto un attimo di difficoltà a capire il funzionamento generale, ma mi sembra che ci sono.

Pure io apprezzo molto il buon Alpine.js.

**fermat** · 20-03-2024, 15:30

Originariamente inviata da alka

Pure io apprezzo molto il buon Alpine.js.

si concordo, lo sto apprezzando.
così su due piedi non so se lo userei anche per grossi progetti al posto di angular o react.
ma per quello che ci devo fare ora è perfetto!

Discussione: Html dinamico in javascript, consigli su librerie

Strumenti discussione

Ricerca discussione

Visualizza

Html dinamico in javascript, consigli su librerie

Permessi di invio