• User

    Compilare file Json con Javascript

    è possibile compilare un file .json con Javascript?

    ho la necessità di recuperare dei dati da una form ed inviarli ad un file .json, possibilmente che si implementi a ogni invio. ho cercato ovunque ma trovo solo info su come richiamare il file all'interno della pagina e non come compilarlo, quindi mi chiedo se è possibile o meno.


  • User Newbie

    Per scaricare un file JSON a partire da un form come prima cosa devi avere un form HTML, più un semplice elemento "a" a cui devi applicare l'attributo download:

    [HTML]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <form>
    <div>
    <label for="name">Your name:</label>
    <input id="name" type="text" name="first_name" required>
    </div>
    <div>
    <label for="last_name">Your last name:</label>
    <input id="last_name" type="text" name="last_name" required>
    </div>
    <button type="submit">SEND</button>
    </form>
    <a id="download" download>Download you file</a>
    </body>
    <script src="form.js"></script>
    </html>
    [/HTML]

    Poi nel file JavaScript che controlla il form devi:

    • gestire il submit come si fa di solito con un event listener
    • costruire un Data URL a partire da un FormData

    Quindi avrai un event listener per gestire il form, che chiama una funzione helper per costruire il link da scaricare:

    
    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      buildJSON(this);
    });
    
    

    Ecco il codice completo:

    
    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      buildJSON(this);
    });
    
    function buildJSON(form) {
      const formData = new FormData(form);
      const rawObj = Object.fromEntries(formData.entries());
      const json = JSON.stringify(rawObj);
      const dataURL = `data:application/json,${json}`;
    
      const link = document.getElementById("download");
      link.setAttribute("href", dataURL);
    }
    
    

    Nella funzione buildJSON:

    • costruiamo un oggetto form data a partire dai campi del form
    • costruiamo un oggetto JavaScript a partire dal form data
    • l'oggetto viene trasformato in JSON
    • l'attributo href del link viene valorizzato con il nostro Data URL

    Spero di essere stato d'aiuto. Ciao!


  • User

    Grazie, molto interessante!