DEV Community

Cover image for JSON Crash Course
Femi Fatokun
Femi Fatokun

Posted on • Edited on

JSON Crash Course

Hello Techies, how is it going?
I know most of us use "JSON", but at the same time most of us don't know what it really means and how to use it best.
In this article, I will explain what JSON really is and how to use it best.

Introduction

The term "JSON" stands to "Javascript Object Notation". JSON is a lightweight data format that stores data in human-friendly key-value pair structure. It is mostly used to interchange data between different servers or clients.

Advantages of JSON

  1. It is light.
  2. It uses key-value pair to store data.
  3. More human readable.
  4. Have native support in multiple programming languages.
  5. Multiple data types supportes.
  6. Nested values allowed

Datatypes in JSON

JSON can represent data of 6 different types, the key must be enclosed in double quotes(""), below is an example of a JSON code :

    {
        "name" : "Femi Fatokun",
        "age" : 0,
        "isAsleep" : false,
        "wifeName" : null,
        "hobbies" : [
            "Cooking", "Football", "Coding"
        ],
        "address" : {
            "country" : "Nigeria",
            "state" : "Kaduna",
            "lg" : "Kaduna South",
            "street" : "Dummy Street"
        }
    }
Enter fullscreen mode Exit fullscreen mode
  1. String : The name key in the code above represents a value of string type. The string datatype in JSON is very similar to most programming languages, but in JSON you can only create use double quotes("") to represent a string.
  2. Number : age in the code above represents a value of number type, the number type in JSON is most similar to that of Javascript. The number type represent integers like 10 and floating point number like 10.67847.
  3. Boolean : The boolean type in JSON is the same thing with most programming languages. It is can only contain 2 values, true or false. isAsleep in the code above is an example of a boolean.
  4. Null : This datatype is represent data that is not available, it is different from "" which represents an empty string. wifeName is an example.
  5. Array : An array in JSON is very similar to arrays in most programming languages. An array is a list of object, this object can be any other datatypes including an array itself. An array also allows nesting. hobbies in the code above is an example of an array. Below is an example of an array with different datatypes and nested values.
{
    "array" : [
        "string",
        10,
        true,
        null,
        ["One", "Two", "Three"],
        {
            "key" : "value"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode
  1. Object : We can refer to the object type as the JSON itself, object are used to store different datatypes in key-value pair format, they also allow nested values, below is an example :
{
    "object" : {
        "string" : "Hello world",
        "number" : 40.9,
        "boolean" : false,
        "n_a" : null,
        "array" : [
            "One", "Two", "Three"
        ],
        "nested_object" : {
            "key" : "value"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

JSON in popular programming languages( JS and PHP )

As I already mentioned earlier, JSON is natively supported in most programming languages, this means you don't need any external library to handle JSON data in most languages, below we will parse JSON in 2 popular programming languages, PHP and Javascript.

Javascript

Javascript is one of the popular languages that has inbuilt support for JSON.

  • Encoding : We can encode a javascript object literal or array to JSON
//Javascript Object Literal
let object = {
    name : "Femi Fatokun",
    age : 20
};
//JSON Encoded Object
let encodedObject = JSON.stringify(object);
Enter fullscreen mode Exit fullscreen mode
  • Decoding : We can decode a JSON object or an array into a Javascript object literal or array.
//JSON object
let object = `{
    "name" : "Femi Fatokun",
    "age" : 20
}`; 
//Javascript Object Literal
let decodedObject = JSON.parse(object)
Enter fullscreen mode Exit fullscreen mode

PHP

PHP also have built in support for JSON.

  • Encoding : Below we will encode a php associative array to JSON.
<?php
    //PHP associative array
    $object = [
        "name" => "Femi Fatokun",
        "age" => 20
    ];
    //JSON object
    $encodedObject = json_encode($object);
?>
Enter fullscreen mode Exit fullscreen mode
  • Decoding : Below we will decode a JSON object into a php associative array.
<?php
    //JSON Object
    $object = '{
        "name" : "Femi Fatokun",
        "age" : 20
    }';
    //PHP associative array
    $decodedObject = json_decode($object, true);
?>
Enter fullscreen mode Exit fullscreen mode

Watch me demonstrate this on Youtube.

Top comments (0)