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.
{"name": "John", "age": 30}// valid


{'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.
"Hello World"
123
  • Below code is invalid JSON data because they are having two top-level data.
({ "name": "John", "age": 30 }, { "name": "Jane", "age": 30 })
  • But you will use an array or object as the top-level data like below.
{
    "name": "John",
    "age": 30,
    "isMarried": false,
    "cars": ["Ford", "BMW", "Fiat"]
}

or,

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

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.

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


const json = JSON.stringify(users)
console.log(json)


// output
// '[{"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.

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


// Output


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

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.

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


const parsedData = JSON.parse(data)
console.log(parsedData)


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

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

Demo

You can demo the website from here

Features

  • Static Blog pages will make the website load faster.
  • Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
  • Autocomplete search feature for the blog posts.
  • Real-time view counter and so on.

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

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

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

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