What is JSON, and how to use it in JavaScript
JSON is an essential tool for managing and interacting with data. Learn the basics of JSON and how to use it in JavaScript.
Apr 11, 2025 • 4 Minute Read
Have you ever needed to exchange data between systems? If so, you’ve probably worked with formats like CSV, XML, YAML, or JSON. These are all common data interchange formats, and one of their key attributes is that they’re readable by both humans and machines.
In this post, we’re going to explore JSON and how to use it in JavaScript. JSON has become a popular choice among developers over other formats because it's language-agnostic and widely adopted as a standard output for APIs across many different types of applications. If you’re working with JavaScript, JSON is an essential tool for managing and interacting with data.
What is JSON?
JSON (JavaScript Object Notation) is a lightweight data format used to exchange information between a client and server or between different parts of an application. It represents data as key-value pairs in a simple, structured way, making it easy to organize and transmit. While JSON is based on a subset of the JavaScript programming language, it is language-independent and supported by most modern programming languages, including Python, Java, and JavaScript.
One of JSON's biggest strengths is its balance between human readability and machine efficiency. Its clean, text-based structure makes it easy for developers to read and edit, while also allowing programs to quickly parse and process the data. JSON has become the standard format for APIs, configuration files, and many other scenarios where structured data needs to be shared or stored.
JSON syntax
JSON data is represented as key-value pairs, similar to JavaScript objects, enclosed in curly braces {}. Each key is a string wrapped in double quotes, followed by a colon : and its corresponding value. Multiple key-value pairs are separated by commas.
Here is an example of a simple JSON object:
{ "name": "Darious Johnson", "age": 42, "city": "Minneapolis" }
Data types in JSON
JSON supports a limited set of data types that are simple yet flexible for representing structured data. These include:
Strings: Enclosed in double quotes
Numbers: Integers or floating-point numbers
Boolean: true or false
Arrays: Ordered lists of values enclosed in square brackets []
Objects: Unordered collections of key-value pairs enclosed in curly braces {}
null: Represents an empty value
How to create JSON data
JSON objects
In JavaScript, you can create JSON objects by defining a JavaScript object with the appropriate structure and then converting it to JSON using the JSON.stringify() method.
Here is the example code:
const person = { name: "Darious Johnson", age: 42, city: "Minneapolis" };
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);
JSON arrays
JSON arrays are used to store ordered lists of values. You can create JSON arrays in JavaScript by defining an array and then converting it to JSON using JSON.stringify().
Here is example code:
const fruits = ["apple", "banana", "cherry"];
const jsonArray = JSON.stringify(fruits);
console.log(jsonArray);
How to work with JSON in JavaScript
How to parse JSON
When you receive JSON data from a server or have it stored as a string, you can use the JSON.parse() method to convert it into a usable JavaScript object.
Here is example code:
const person = { name: "Alice", age: 35, city: "St Paul" };
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);
Stringifying JavaScript objects
To convert a JavaScript object or array into a JSON-formatted string (for example, sending data to a server), use the JSON.stringify() method.
Here is example code:
javascriptCopy code
const person = { name: "Alice", age: 35, city: "St Paul" }; const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);
How to work with JSON in HTTP requests
Sending JSON data
When sending data to a server using AJAX (Asynchronous JavaScript and XML), you can format your data as a JSON string and include it in the request body.
Here's an example using the fetch API to send data:
const data = { username: "user123", password: "secretpassword" };
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Receiving and parsing JSON data
When receiving JSON data from a server, the fetch API can automatically parse the response using .json(), converting it into a JavaScript object for you to work with.
Here's an example using the fetch API to receive data:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Process the JSON data here
console.log(data);
})
.catch(error => console.error('Error:', error));
Conclusion
As a developer, knowing JSON is important as it is a versatile and essential data format, making it easy to structure and exchange information between apps. By understanding how to create, parse, and work with JSON in JavaScript, you’ll be better equipped to build modern and dynamic apps that can efficiently communicate with servers and manage data seamlessly.
For more learning on JavaScript, check out this path full of JavaScript courses on Pluralsight.
Advance your tech skills today
Access courses on AI, cloud, data, security, and more—all led by industry experts.