DEV Community

loading...
Cover image for Learn JSON in 5 Minutes

Learn JSON in 5 Minutes

Ajay Yadav
Php web developer from India
・2 min read

JSON Stands for JavaScript Object Notation, It is lightweight format for storing and transporting data through API from server to a web page. It is also 'self describing' and easy to understand.

Example:

Alt Text

JSON Data types :

1. JSON Strings

{ "name":"Ajay"}
Enter fullscreen mode Exit fullscreen mode

Here "name" is a key and "Ajay" is its
value.

2. JSON Numbers

 { "Age":34}
Enter fullscreen mode Exit fullscreen mode

Here "Age" is a key and 34 is value, which is a
number type.

3. JSON Objects

{ "friends":[
        {
            "name":"Shyam singh",
            "age":25,
            "email":"ram@gmail.com"
        },
        {
            "name":"Rahul roy",
            "age":26,
            "dob":"23/12/1996",
            "isFriend":true
        }
    ] }
Enter fullscreen mode Exit fullscreen mode

here "friends" is a key and its values are in array data type
which contains two objects. His first friend is shyam and
second frind is Rahul.

4. JSON Arrays

{"hobbies":["Learn to code", "Paint", "Blogging", "Writing"]}
Enter fullscreen mode Exit fullscreen mode

Here "hobbies" is a key and it has multiple values in array
format separated by commas.

5. JSON Booleans

"isFriend":true
Enter fullscreen mode Exit fullscreen mode

Here "isFriend" is a key and its value in Boolean format which
can be either true or false.

6. JSON Null

{"middlename":null}
Enter fullscreen mode Exit fullscreen mode

"middlename" is a key and its value in null format. if something has no value than we can assign null to its value for example some people have no middle name in that case we can assign null value.

A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always in string format.
Parse the data with JSON.parse() and the data become javaScript object.
_Example _ ( data coming from a web server )

'{ "name":"Ajay", "city":"New Delhi"}'
Enter fullscreen mode Exit fullscreen mode

the data is in string format now we need to convert it into javaScript Object by using JSON.parse()

var obj = JSON.parse('{ "name":"Ajay", "city":"New Delhi"}');
Enter fullscreen mode Exit fullscreen mode

Now we can use

Thank you,

Discussion (3)

Collapse
adishjain profile image
Adish Jain

Hey Ajay! I really enjoyed this tutorial & made a more interactive version of it here: getleaf.app/dsps301/learnjsonin-o2.... I wanted to DM you but I couldn't find your contact info. If you have some time to talk, let's get in touch and discuss more!

Collapse
ajayyadav profile image
Ajay Yadav Author

Sure, contact me by email... ajayyadavexpo@gmail.com

Collapse
adishjain profile image
Adish Jain

Great :) Just emailed you!