Learn JSON in 5 minutes: JSON for Beginners

What is JSON and why is it important?

JSON, also known as JavaScript object notation, is a simple data representation format with a close resemblance to XML and YAML. It’s used extensively across the internet for almost every single API that you will access. It also finds broad usage in various areas of programming such as configuration files and applications like games, text editors, and VS Code.

JSON is used everywhere because of its lightweight nature, stemming from its small file size. This attribute makes JSON ideal for back-and-forth data transmission. When compared to other formats like XML, JSON is easier to read as it’s cleaner and less cluttered. It lacks numerous opening and closing tags often seen in other formats.

Given that JSON is a superset of JavaScript, any piece of code written in JSON is valid JavaScript. The integration with JavaScript, a language used universally across the web for both front-end and back-end development, becomes remarkably seamless as a result.

Moreover, practically every major programming language comes equipped with a library or built-in functionality for parsing JSON strings into objects or classes. This feature significantly simplifies the task of working with JSON data in various programming languages.

Throughout your career as a programmer, you’ll frequently interact with JSON, whether it’s developing an API, consuming one, or creating configuration files. Whether these files are for your personal use or for wider use in your applications, JSON is an essential tool in your programming arsenal.

JSON Data Types

JSON can represent several data types, including:

1. Strings: These are sequences of characters.
2. Numbers: These can be in any format—decimal numbers, whole numbers, negative numbers, or even scientific notation numbers.
3. Booleans: These can be either true or false.
4. Null: This stands for nothing.
5. Arrays: These can be a list of any of the types above.
6. Objects: These are collections of key-value pairs. The value can be any of the types mentioned.

Creating a JSON file

To create a JSON file, you need to:

1. Create a file with the .json extension.
2. Fill the file with a valid JSON type (the data types seen above).

We could include a string, a number, a boolean, or any other valid data type. However, consider that while you can include single numbers or strings in your JSON file, such standalone values may not fully exploit the power of JSON. It’s often more practical to have an array or an object at the root of your file, which can then encompass other values.

Your array or object could house other nested objects or arrays, as well as individual values like strings or numbers. This nesting and layering are where the real power of JSON lies, allowing you to create complex and deeply structured data.

Example:

Let’s create a user.json file with an object as the top level. To create the object, we use curly braces { }. Then inside the braces, we put all the key/value pairs that make up our object.

The key must be surrounded by double quotes followed by a colon and then the value for that key. Examples: "name": "John Doe", "favoriteNumber": 7, "isProgrammer": true.

When we have multiple key/value pairs, we need commas to separate every single one of our key/value pairs, as we would normally do when working with arrays.

The object in our example will be a user, with properties such as name, favorite number, and whether they are a programmer or not.

{
    "name": "John Doe",
    "favoriteNumber": 7,
    "isProgrammer": true,
    "hobbies": ["coding", "reading", "gaming"],
    "friends": [
        {
            "name": "Jane Doe",
            "favoriteNumber": 5,
            "isProgrammer": false,
            "hobbies": ["painting", "reading", "music"]
        },
        {
            "name": "Bob Ross",
            "favoriteNumber": 9,
            "isProgrammer": true,
            "hobbies": ["painting", "gardening"]
        }
    ]
}

In the above JSON, we have an object with nested arrays and objects, creating a hierarchy of data.

Parsing a JSON file in JavaScript

Let’s go ahead and parse a JSON file. We’ll create a schools.json file storing an array of schools. Each school will have a name, a number of students, a director, and a rating.

Example:

Here is our schools.json file:

[
    {
        "name": "Big School",
        "numberOfStudents": 2000,
        "Director": "Peter",
        "rating": 4.7
    },
    {
        "name": "Small School",
        "numberOfStudents": 300,
        "Director": "Diana",
        "rating": 4.1
    }
]

As we mentioned before, anything in JSON is valid JavaScript, so we could take this JSON directly and just paste it in a JavaScript file or HTML file (using the <script> tag) and we could manipulate the data without problems

However, most of the time we’re dealing with JSON, we’re going to get it back as a string and not as an actual JavaScript object. This means that we can’t actually use this object inside our JavaScript.

In order to convert this JSON string into a JavaScript object, we need to use JSON.parse( ).

Now, let’s take a look at this HTML file, where we include JavaScript using the <script> tag. To common JSON behavior in our example, we will surround the data with backticks.

<script>
    // This is our JSON data
    const schools =  `[
    {
        "name": "Big School",
        "numberOfStudents": 2000,
        "Director": "Peter",
        "rating": 4.7
    },
    {
        "name": "Small School",
        "numberOfStudents": 300,
        "Director": "Diana",
        "rating": 4.1
    }
]`; /
    const schoolsObject = JSON.parse(schools);

    // Now we can use treat the data as a normal JavaScript object
    console.log(schoolsObject[0].name); // Logs "Big School"
    console.log(schoolsObject[1].name); // Logs "Small School"
</script>

In the above example, we’re converting the JSON string into a JavaScript object using JSON.parse(). Then, we’re accessing the school names from the JavaScript object.

Conclusion

JSON is a data representation format that is easy to read, lightweight, and when transmitted over the internet, it uses minimal space, enhancing the user experience.

The syntax for JSON is straightforward. The key points to remember are to use double quotes around your keys, followed by a colon and then the value for that key. Commas are used to separate multiple key/value pairs.

Finally, when dealing with JSON data, we would normally get it as a string. Therefore, to convert it to a normal JavaScript object, we use JSON.parse( ).