Compilare file Json con Javascript

mkfan822

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.

valentino.g

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!

mkfan822

Grazie, molto interessante!