Skip to Content
Article

Working with JSON in JavaScript

A user guide on how to work with JSON in Javascript.

Introduction

JSON, short for JavaScript Object Notation, is a language-independent data format that has been accepted as an industry standard. Because it is based on the JavaScript programming language, JSON’s syntax looks similar to a JavaScript object with minor differences. We’ll take a look at the subtle difference between them. Later on, we’ll learn how to parse JSON and extract its content as JavaScript. Lastly, we’ll learn how to write a JSON object with JavaScript. So, let’s begin.

JSON Object vs. JavaScript Object

Here is an example JSON object of a person named Kate, who is 30 years old, and whose hobbies include reading, writing, cooking, and playing tennis:

{ "person": { "name": "Kate", "age": 30, "hobbies": [ "reading", "writing", "cooking", "tennis" ] } }

Represented as a JavaScript object literal, the same information would appear as:

{ person: { name: 'Kate', age: 30, hobbies: [ 'reading', 'writing', 'cooking', 'tennis' ] } }

Notice a slight difference between the two formats.

  • The name portion in each JSON name-value pair and all string values must be enclosed in double-quotes while this is optional in JavaScript.
  • JavaScript accepts string values that are single or double-quoted, however, there exists JavaScript coding guidelines that prefer one style over another.

Reading a JSON String

In a typical web application, the JSON data that we receive from a web request comes in the form of a string. At other times, JSON data is stored in a file that is used for authentication, configuration, or database storage. These files typically have a .json extension, and they have to be opened in order to retrieve the JSON string in it. In either case, we will need to convert the string to a format that we can use in order to access its parts. Each programming language has its own mechanism to handle this conversion. In JavaScript, for example, we have a built-in JSON class with a method called .parse() that takes a JSON string as a parameter and returns a JavaScript object.

The following code converts a JSON string object, jsonData, into a JavaScript object, jsObject, and logs jsObject on the console.

const jsonData = '{ "book": { "name": "JSON Primer", "price": 29.99, "inStock": true, "rating": null } }'; const jsObject = JSON.parse(jsonData); console.log(jsObject);

This will print out jsObject as follows:

{ book: { name: 'JSON Primer', price: 29.99, inStock: true, rating: null } }

Once we have converted a JSON object to a JavaScript object, we can access the individual properties inside the JavaScript object. To access a value inside a JavaScript object based on its property name, we can either use dot notation, (.propertyName), or bracket notation, (['propertyName']).

For instance, to retrieve the book property of jsObject we could do the following:

// Using the dot notation const book = jsObject.book; console.log(book); console.log(book.name, book.price, book.inStock); // Using the bracket notation const book2 = jsObject['book']; console.log(book2); console.log(book2["name"], book2["price"], book2["inStock"]);

Both ways of accessing the book property return the same output:

{ name: 'JSON Primer', price: 29.99, inStock: true, rating: null } JSON Primer 29.99 true

As you can see, after parsing jsonData into a JavaScript object that’s stored in the variable, book, you can treat book like any other object! That means you can access property values, as shown above, edit existing values, iterate over the keys and values, etc…

Exercise: Reading a JSON String

Now that we’ve shown you how to read a JSON string, let’s practice with a code challenge by writing some code yourself.

Ready to Learn More?

Find the course that's right for you! Explore our catalog or get a recommendation.