How to Read and Write JSON in JavaScript
Tags: javascript, programming, json
Published: 2023-02-01 01:01:40

by [Antonello Zanini](https://blog.openreplay.com/authors/antonello-zanini)


JSON is one of the Web's most widely used and popular data formats. In detail, JSON is derived from JavaScript and shares a similar syntax to JavaScript objects. As many Web applications are built with JavaScript and use JSON to communicate, JavaScript developers must know how to work with JSON.

In this article, you will learn everything you need to know to become an expert when it comes to using JSON in JavaScript. Specifically, you will see how to serialize and parse JSON in JavaScript and read and write JSON files in JavaScript with Node.js.

Let's dig into how to deal with the JSON format in JavaScript, both in the front and back end! 

## JavaScript and JSON

JSON stands for [JavaScript Object Notation](https://en.wikipedia.org/wiki/JSON), and although it is clearly related to JavaScript, the two are not the same. Specifically, JSON is a data exchange format based on a subset of JavaScript syntax. JSON is a lightweight format, and its strengths are that it is easy for humans to read and for machines to parse. Check our guide to [learn more about the JSON format](https://blog.openreplay.com/all-about-the-json-format/).

On the other hand, JavaScript is a weakly typed programming language used primarily for front-end and back-end development. Since Web applications generally communicate in JSON format, JavaScript natively offers methods to convert a JavaScript object to JSON and vice versa. 

Let's now learn how to read and write with JSON in JavaScript.

### JSON Serialization in JavaScript

JavaScript natively comes with the [`JSON`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) object. This exposes the following two static methods:

- [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify):  To convert a JavaScript array, object, or primitive value to a JSON string
- [`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse): To convert a JSON string to the corresponding JavaScript array, object, or primitive value.

Let's now learn how to use these two methods.

You can use `JSON.stringify()` to serialize a JavaScript object to a JSON string as follows:

```javascript
// defining a JavaScript object
const user = {
  id: 5,
  firstName: "Maria",
  lastName: "Williams",
  age: 34,
  email: "m.williams@example.com",
  address: {
    streetAddress: "123 Main St",
    city: "Anytown",
    state: "US",
    postalCode: "12345",
  },
  phoneNumbers: [
    {
      type: "home",
      number: "555-555-5554",
    },
    {
      type: "work",
      number: "555-555-5555",
    },
  ],
};

// converting user to JSON
const userJSON = JSON.stringify(user);

// using userJSON in an API body...
```

In detail, `JSON.stringify()` accepts any JavaScript value and returns it as a JSON string. If the value passed as a parameter contains a circular reference or involves a [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt), a [`TypeError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) is raised.

As you can verify with `console.log(userJSON)`, `userJSON` stores:
```javascript
{
    "id": 5,
    "firstName": "Maria",
    "lastName": "Williams",
    "age": 34,
    "email": "m.williams@example.com",
    "address": {
        "streetAddress": "123 Main St",
        "city": "Anytown",
        "state": "US",
        "postalCode": "12345"
    },
    "phoneNumbers": [
        {
            "type": "home",
            "number": "555-555-5554"
        },
        {
            "type": "work",
            "number": "555-555-5555"
        }
    ]
} 
```

This is exactly the JSON representation of the `user` JavaScript object. You can now use `userJSON` as the body of an [HTTP `POST` request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) for logging or more. 

Similarly, you can also use `JSON.stringify()` on JavaScript arrays and primitive values.

### JSON Parsing in JavaScript

Let's assume you have a string variable containing JSON data and want to parse it into its JavaScript representation. You can achieve this with `JSON.parse()` as below:

```javascript
// a string variable storing JSON data
// coming from an API response
const apiResponse = `{"id":5, "firstName": "Maria", "lastName": "Williams", "age":34, "email": "m.williams@example.com", "address" :{ "streetAddress": "123 Main St", "city": "Anytown", "state": "US", "postalCode": "12345"}, "phoneNumbers":[{"type": "home", "number": "555-555-5554"},{"type": "work", "number": "555-555-5555"}]}`;

// converting JSON to JavaScript
const user = JSON.parse(apiResponse);
```

Note that `JSON.parse()` accepts a valid JSON string value and returns a JavaScript value. In case of invalid JSON data, it throws a [`SyntaxError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError).


## Reading/Writing JSON Files in JavaScript

Vanilla JavaScript does not allow you to deal with the file system, but you can do it in your back-end with Node.js. 

In detail, the native [`fs`](https://nodejs.org/api/fs.html) module enables you to watch, read, and write files in the file system of your back-end application. Since `fs` is a native Node.js module, you do not need to install any extra dependencies, and you can require it directly with the following:

```javascript
const fs = require("fs");
```

Or in [ES6](https://en.wikipedia.org/wiki/ECMAScript), you can import it with:

```javascript
import * as fs from "fs";
```

Note that the `fs` module comes with synchronous and asynchronous versions for most of its functions. Synchronous versions block the execution of other code until the file system operation is finished. In contrast, asynchronous versions are based on [callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) and are executed as non-blocking operations. Learn more about [blocking vs. non-blocking behavior](https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/) in Node.js.

Let's now see how to read and write files in Node.js with the [`fs.readFile()`](https://nodejs.org/api/fs.html#filehandlereadfileoptions) and [`fs.writeFile()`](https://nodejs.org/api/fs.html#filehandlewritefiledata-options) functions.

### How to Read a JSON File in Node.js
Let's assume you have a `user.json` file in the same folder as your Node.js script. This JSON file contains the following:

```javascript
{
    "id": 14,
    "firstName": "John",
    "lastName": "Smith",
    "age": 47
} 
```

You can use the `fs.readFile()` function to read `user.json` in Node.js and convert its content with `JSON.parse()` as below:

```javascript
// importing the fs module
const fs = require("fs");

// reading a JSON file asynchronously
fs.readFile("user.json", (error, data) => {
  // if the reading process failed,
  // throwing the error
  if (error) {
    // logging the error
    console.error(error);

    throw err;
  }

  // parsing the JSON object
  // to convert it to a JavaScript object
  const user = JSON.parse(data);

  // printing the JavaScript object
  // retrieved from the JSON file
  console.log(user);
});

```

Note that the `fs.readFile()` function accepts:

- A `filename` string: Contains the file name if saved locally or the absolute path if saved elsewhere.
- A `callback` function: The function to call after reading the file. This callback takes the following two parameters:
    - `error`: If any error occurred.
    - `data`: The content of the file as a string.

`fs.readFile()` also accepts a parameter to specify the file's encoding. If omitted, its default value is `"utf8```.

When run, this script would print:

```javascript
{ id: 14, firstName: "John", lastName: "Smith", age: 47 }
```

This is the JavaScript representation of the JSON content stored in `user.json`.

You can achieve the same result synchronously with [`fs.readFileSync()`](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options) as follows:

```javascript
const fs = require("fs");

try {
  // reading a JSON file synchronously
  const data = fs.readFileSync("user.json");
} catch (error) {
  // logging the error
  console.error(error);

  throw error;
}

// parsing the JSON content
const user = JSON.parse(data);

// logging the content read from a file
console.log(user);
```

In this case, the `fs.readFileSync()` function blocks the code execution until the file is read. Then, it parses it and prints its content. Note the [`try...catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) statement to handle the potential reading errors.

Great! You now know how to read JSON files in JavaScript with Node.js! 

### How to Write a JSON File in Node.js
Let's assume you want to convert an existing JavaScript object to JSON to store it in a `data.json` file. You can achieve this with `JSON.stringify()` and `fs.writeFile()` with:

```javascript
// importing the fs module
const fs = require("fs");

// initializing a JavaScript object
const user = {
  id: 1,
  completeName: "Jennifer Jones",
  age: 20,
};

// converting the JSON object to a string
const data = JSON.stringify(user);

// writing the JSON string content to a file
fs.writeFile("data.json", data, (error) => {
  // throwing the error
  // in case of a writing problem
  if (error) {
    // logging the error
    console.error(error);

    throw error;
  }

  console.log("data.json written correctly");
});
```
Note that `fs.writeFile()` requires the following parameters:

- A file string: The file's path where to write it.
- The content to write: A `string`, `Buffer`, `TypedArray`, or `DataView` object that will be written to the file.
- A callback function: The function that is called when the writing process ends, and it accepts the following parameters:
    - error: If the operation fails.

`fs.writeFile()` also accepts an optional object parameter to specify the file's encoding (`utf8` by default), the file permissions, and more.

Run the script, and you will find a `data.json` file containing the following:

```javascript
{
  "id": 1,
  "completeName": "Jennifer Jones",
  "age": 20
}
```

This represents the `user` JavaScript object in JSON format.

You can get the same output synchronously with [`fs.writeFileSync()`](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options) as below:

```javascript
const fs = require("fs");

// converting a JS object to JSON
const user = {
  id: 1,
  completeName: "Jennifer Jones",
  age: 20,
};
const data = JSON.stringify(user);

try {
  // reading a JSON file synchronously
  fs.writeFileSync("data.json", data);
} catch (error) {
  // logging the error
  console.error(error);

  throw error;
}

// logging the outcome
console.log("data.json written correctly");
```

Here, `fs.writeFileSync()` does not involve a callback function because it blocks the code execution until the writing operation is done. In case of an error, the `catch` statement will intercept it to handle it.

Congrats! You can now write JSON files in JavaScript.

### How to Update a JSON File in Node.js

Let's now see a complete example involving reading and writing a JSON file to update its content. In this case, the goal is to add a `completeName` field to the following `user.json` file:

```javascript
{
    "id": 9,
    "firstName": "Mary",
    "lastName": "Anderson"
} 
```

You can achieve that goal with the following:

```javascript
const fs = require("fs");

// the .json file path
const JSON_FILE = "user.json";

try {
  // reading the JSON file
  const jsonData = fs.readFileSync(JSON_FILE);

  // parsing the JSON content
  const user = JSON.parse(jsonData);

  // adding the "completeName" field to
  // JavaScript representation of the
  // "user.json" file
  data["completeName"] = `${user.firstName} ${user.lastName}`;

  // updating the JSON file
  fs.writeFileSync(JSON_FILE, data);
} catch (error) {
  // logging the error
  console.error(error);

  throw error;
}
```

At the end of the process, `user.json` will contain the following:

```javascript
{
    "id": 9,
    "firstName": "Mary",
    "lastName": "Anderson",
    "completeName": "Mary Anderson"
} 
```

Et voilà! You just learned how to update a JSON file in Node.js.


<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>



## Importing a JSON file in Webpack

[Webpack can natively load JSON static assets](https://webpack.js.org/guides/asset-management/#loading-data). So, in a Webpack-based JavaScript application, you can load a JSON file with a simple [ES6 `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) as follows:

```javascript
import data from "./data.json";

// ...

// data is a JavaScript object 
// directly containing the JSON content 
// parsed from "data.json" 
console.log(data.name); // e.g. "John"
```

This is another way to read JSON files in JavaScript that comes in handy in React applications created with [Create React App](https://create-react-app.dev/) or Next.js applications created with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).

## Conclusion

The article is over! At this point, you know the relationship between JSON and JavaScript, how to deal with JSON in JavaScript native methods, and how to read and write JSON files with JavaScript in Node.js. Also, you learned how Webpack makes importing JSON files easier.

As seen here, dealing with JSON in JavaScript is easy. In this tutorial, you got all the information you need to start using JSON in JavaScript in both the back-end and front-end.

Thanks for reading!


> A TIP FROM THE EDITOR: For more on the JSON format, don't miss [All About The JSON Format](https://blog.openreplay.com/all-about-the-json-format/)!



[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)