Menu
Everything you need to know about JSON by Cules Coding

Everything you need to know about JSON

In this blog, you will learn everything you need to know about JSON.

Video Tutorial

I have already made a video about it on my youtube channel. Check that out.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

What is JSON?

  • JSON stands for JavaScript Object Notation.
  • It is a lightweight data-interchange format.
  • Most of the time, JSON is used for sending and receiving data between a server and a client.
  • It is also used for configuration files. For instance, package.json in npm, settings.json in VScode.

Why use JSON?

  • It is easy to read, write and understand.
  • JSON can be used with any programming language.
  • It is lightweight.

JSON data types

  • String: Any text enclosed in double-quotes. For instance, "Hello World".
  • Number: Any valid number. For instance, 123, -123, 0.123, 1.23e-10.
  • Boolean: true or false.
  • Object: A collection of key-value pairs enclosed in curly braces. For instance, { "name": "John", "age": 30 }.
  • Array: An ordered list of values enclosed in square brackets. For instance, [1, 2, 3, 4, 5] or ["Hello", "World"].
  • Null

Unsupported data types in JSON

  • function
  • date
  • undefined

JSON syntax

  • A string has to be enclosed in double quotes. All the property names are strings. So they also have to be enclosed in double quotes. Make sure you have a comma at the end.
1{"name": "John", "age": 30}// valid
2

3{'name': 'John', "age": 30}// invalid
  • A JSON data has to have top-level data. It can be a single string or number like below. But you will not see this in the JSON data.
1"Hello World"
1123
  • Below code is invalid JSON data because they are having two top-level data.
1({ "name": "John", "age": 30 }, { "name": "Jane", "age": 30 })
  • But you will use an array or object as the top-level data like below.
1{
2    "name": "John",
3    "age": 30,
4    "isMarried": false,
5    "cars": ["Ford", "BMW", "Fiat"]
6}

or,

1[
2    {
3        "name": "John",
4        "age": 30,
5        "isMarried": false,
6        "cars": ["Ford", "BMW", "Fiat"]
7    },
8    {
9        "name": "Mary",
10        "age": 28,
11        "isMarried": true,
12        "cars": ["Renault", "Peugeot"]
13    }
14]

Let's see how to parse this JSON data.

Stringify Json data

A common use of JSON is to exchange data to/from a web server. When sending data to a web server, the data has to be a string. We can convert a JavaScript object into a JSON string.

1const users = [
2    {
3        name: 'John',
4        age: 30,
5        isMarried: false,
6        cars: ['Ford', 'BMW', 'Fiat'],
7    },
8    {
9        name: 'Mary',
10        age: 28,
11        isMarried: true,
12        cars: ['Renault', 'Peugeot'],
13    },
14]
15

16const json = JSON.stringify(users)
17console.log(json)
18

19// output
20// '[{"name":"John","age":30,"isMarried":false,"cars":["Ford","BMW","Fiat"]},{"name":"Mary","age":28,"isMarried":true,"cars":["Renault","Peugeot"]}]'

We can also pretty print the JSON data.

1const prettyJson = JSON.stringify(users, null, 2)
2console.log(prettyJson)
3

4// Output
5

6// [
7//   {
8//     "name": "John",
9//     "age": 30,
10//     "isMarried": false,
11//     "cars": [
12//       "Ford",
13//       "BMW",
14//       "Fiat"
15//     ]
16//   },
17//   {
18//     "name": "Mary",
19//     "age": 28,
20//     "isMarried": true,
21//     "cars": [
22//       "Renault",
23//       "Peugeot"
24//     ]
25//   }
26// ]

Explanation:

  • The first argument is the data to be converted.
  • The second argument is the replacer function. It is used to specify which properties of the object should be converted into JSON. You can learn more from MDN .
  • The third argument is the indentation string or the number of spaces to be used for indentation.

Parse JSON data

When receiving data from a web server, the data is always a string. We can convert a JSON string into a JavaScript object.

1const data =
2    ' [ { "name": "John", "age": 30, "isMarried": false, "cars": [ "Ford", "BMW", "Fiat" ] }, { "name": "Mary", "age": 28, "isMarried": true, "cars": [ "Renault", "Peugeot" ] } ]'
3

4const parsedData = JSON.parse(data)
5console.log(parsedData)
6

7// output
8// [
9//  {
10//      name: 'John',
11//      age: 30,
12//      isMarried: false,
13//      cars: ['Ford', 'BMW', 'Fiat'],
14//  },
15//  {
16//      name: 'Mary',
17//      age: 28,
18//      isMarried: true,
19//      cars: ['Renault', 'Peugeot'],
20//  },
21// ]

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostFetch API crash course
Next PostHow to create typewriter effect with JavaScript