# JSON

JSON is an abbreviation for JavaScript Object Notation
It is mainly used for:
- data exchange between servers and (web) application, as an alternative to XML
- describe configuration files in web and other projects e.g: package.json, .prettierrs, .eslint.json, ...
Unlike objects, in JSON double quotes are always required, both for the key and for the value e.g: "name": "John"
JSON cannot contain functions/methods
Only the following values are used in JSON: "key" : <value>
- numbers: 3.1415927
- strings: "this is a string"
- booleans: true and false
- null: null
- objects: { "key" : <value> , ... }
- arrays: [ <value> , ... ]

# Popular data exchange formats

JSON is not only used in JavaScript, but also in Python, Java, ...
At this time, JSON it's the most used data exchange format between servers (API's) end clients
According to Stack Overflow (opens new window), more questions are now asked about JSON than about other data interchange formats

# Converting to and from JSON

methode	description
`JSON.stringify(obj)`	convert an object to a JSON string
`JSON.stringify({obj})`	convert an object to JSON string, nested under the `obj` key
`JSON.parse(<string>)`	convert a JSON string to an object

Some converting examples:

Object literal

const user = {
    // properties
    name: 'John',
    surname: 'Doe',
    age: 41,
    // functions (or methodes)
    greet() {
        console.log(`Hi, ${this.name} ${this.surname}`);
    },
};
 
        Copied!

1
2
3
4
5
6
7
8
9
10

JSON.stringify(user)

{
    "name": "John",
    "surname": "Doe",
    "age": 41
}
 
        Copied!

1
2
3
4
5

JSON.stringify({user})

{
  "user": {
    "name": "John",
    "surname": "Doe",
    "age": 41
  }
}
 
        Copied!

1
2
3
4
5
6
7

Object literal

const campuses = [
    {
        name: 'Campus Geel',
        address: {
            street: 'Kleinhoefstraat 4',
            city: 'Geel',
            zipcode: '2440',
            region: 'Kempen',
            geo: {
                lat: 51.161358,
                lng: 4.963583,
            },
        },
    },
    {
        name: 'Campus Turnhout',
        address: {
            street: 'Campus Blairon 800',
            city: 'Turnhout',
            zipcode: '2300',
            region: 'Kempen',
            geo: {
                lat: 51.317004,
                lng: 4.928719,
                zoom: 15,
            },
        },
    },
];
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

JSON.stringify(campuses)

[
    {"name":"Campus Geel",
        "address":{
            "street":"Kleinhoefstraat 4",
            "city":"Geel",
            "zipcode":"2440"}
    },
    {"name":"Campus Turnhout",
        "address":{
            "street":"Campus Blairon 800",
            "city":"Turnhout",
            "zipcode":"2300"
        }
    }
]
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JSON.stringify({campuses})

{
    "campuses": [
        {"name": "Campus Geel",
            "address": {
                "street": "Kleinhoefstraat 4",
                "city": "Geel",
                "zipcode": "2440"
            }
        },
        {
            "name": "Campus Turnhout",
            "address": {
                "street": "Campus Blairon 800",
                "city": "Turnhout",
                "zipcode": "2300"
            }
        }
    ]
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

JSON

{
    "campuses": [
        {"name": "Campus Geel",
            "address": {
                "street": "Kleinhoefstraat 4",
                "city": "Geel",
                "zipcode": "2440"
            }
        },
        {
            "name": "Campus Turnhout",
            "address": {
                "street": "Campus Blairon 800",
                "city": "Turnhout",
                "zipcode": "2300"
            }
        }
    ]
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const result = JSON.parse('<the JSON string>');

const result = {
    campuses: [
        {
            name: 'Campus Geel',
            address: {
                street: 'Kleinhoefstraat 4',
                city: 'Geel',
                zipcode: '2440',
                region: 'Kempen',
                geo: {
                    lat: 51.161358,
                    lng: 4.963583,
                },
            },
        },
        {
            name: 'Campus Turnhout',
            address: {
                street: 'Campus Blairon 800',
                city: 'Turnhout',
                zipcode: '2300',
                region: 'Kempen',
                geo: {
                    lat: 51.317004,
                    lng: 4.928719,
                    zoom: 15,
                },
            },
        },
    ],
};
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# JSON

# Popular data exchange formats

# Converting to and from JSON

# References