+ Rispondi alla Discussione
Risultati da 1 a 2 di 2

Compilare file Json con Javascript

Ultimo Messaggio di valentino_g il:
  1. #1
    User Newbie
    Data Registrazione
    Nov 2019
    Località
    Sondrio
    Messaggi
    8

    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.

  2. #2
    User Newbie
    Data Registrazione
    Jan 2018
    Località
    Siena
    Messaggi
    3

    Soluzione: un Data URL

    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:

    Codice 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>
    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:

    Codice:
    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      buildJSON(this);
    });
    Ecco il codice completo:

    Codice:
    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!

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.