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}`);
    },
};

• JSON.stringify(user)

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

• JSON.stringify({user})

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

• Array

const numbers = [1, 2, 3, 4, 5];

• JSON.stringify(numbers)

[1, 2, 3, 4, 5]

• JSON.stringify({numbers})

{"numbers":[1, 2, 3, 4, 5]}

• 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,
            },
        },
    },
];

• 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"
        }
    }
]

• 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"
            }
        }
    ]
}

• JSON

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

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

const user = {
    name: 'John',
    surname: 'Doe',
    age: 41,
};

• 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"
            }
        }
    ]
}

• 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,
                },
            },
        },
    ],
};

References

• json.org (opens new window)
• JSON@Mozilla (opens new window)
• JSON@W3Schools (opens new window)