How to Create and Download a Local JSON File Using jQuery

In modern web development, dynamically generating and downloading JSON files is a common requirement. While JavaScript and jQuery running in the browser cannot directly access the file system due to security reasons, they can create and initiate downloads of JSON files. In this comprehensive guide, we will walk through the step-by-step process of creating a local JSON file using jQuery.

Introduction to JSON and JavaScript

JSON (short for JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is widely used for transmitting data between a server and a web application.

Step-by-Step Guide to Create and Download a Local JSON File

Create a JSON Object

The first step involves creating a JSON object in JavaScript. This object will hold the data you want to save in your JSON file.

const data  {
    name: John Doe,
    age: 30,
    city: New York
};

Convert JSON to a Blob

Once you have your JSON object, you need to convert it to a Blob, which is a way to represent multiple-chunk data in one object. This is done using the Blob constructor.

// Convert JSON object to a string
const jsonString  (data, null, 2);
// Create a Blob from the JSON string
const blob  new Blob([jsonString], { type: 'application/json' });

Create a Download Link

To trigger the download, you use an HTML a element. This link will be created dynamically and its href attribute will be set to the object URL created from the Blob.

// Create a link element
const link  ('a');
  (blob);
  data.json;

Trigger the Download

Finally, you programmatically trigger a click on the a element to initiate the download.

// Trigger the download
();

Note: After the download is initiated, it is a good practice to revoke the object URL to release memory.

// Cleanup: Revoke the Object URL
();

Example Code

Here is a complete example of the code using jQuery:

!DOCTYPE html
html langen
head
    meta charsetUTF-8
    titleDownload JSON/title
    script src
/head
body
    button iddownloadDownload JSON/button
    script
        $(document).ready(function () {
            $('#download').click(function () {
                // Step 1: Create a JSON object
                const data  {
                    name: John Doe,
                    age: 30,
                    city: New York
                };
                // Step 2: Convert JSON object to a string
                const jsonString  (data, null, 2);
                // Step 3: Create a Blob from the JSON string
                const blob  new Blob([jsonString], { type: 'application/json' });
                // Step 4: Create a link element
                const link  ('a');
                  (blob);
                  data.json
                // Step 5: Trigger the download
                ();
                // Cleanup: Revoke the Object URL
                ();
            });
        });
    /script
/body
/html

Explanation

JSON Object

The data variable holds the JSON object you want to save.

JSON Stringify

(data, null, 2) converts the object into a JSON string with indentation, making it easier to read and write.

Blob Creation

The Blob constructor is used to create a binary large object from the JSON string, which can then be passed to a URL.

Download Link

An anchor element is created dynamically and its href attribute is set to the object URL created from the Blob, and the download attribute is set to specify the file name.

Click Simulation

The click method simulates a click on the anchor, triggering the download.

Cleanup

() releases the memory once the download is initiated.

Note that this method allows you to create and download a JSON file client-side. If you need to save JSON data to a server or a database, you would need to send the data via an AJAX request to a server-side script that handles file writing.