Creating Structured Data with JSON Objects

JSON (Javascript Object Notation) is a human-readable data format designed for easy handling within Javascript. An important data type within JSON is the JSON object, which is similar to a Javascript object but is not directly defined in the Javascript standard.

JSON objects are part of the JSON standard, which is distinct from the Javascript standard. The main difference between JSON objects and Javascript objects is that JSON objects are always static, while Javascript objects are dynamic.

In this article, we define what JSON objects are and how they differ from Javascript objects. The two data structures are similar, so it is important to understand the differences in how they are used.

JSON Objects Overview

JSON objects save data in key-value pairs. A JSON object key must always be a string, but a JSON object value may be any valid JSON data type. JSON objects may contain duplicate values, but they may not contain duplicate keys.

Define JSON objects by surrounding lists of JSON key-value pairs with braces. Separate keys from values with a colon and pairs from other pairs with commas. You may use any amount of whitespace you wish to separate keys, values, and pairs.

The following JSON objects are equivalent.

{"A": "B", "C": "D"}

{
    "A": "B",
    "C": "D"
}

JSON Object Data Types

JSON objects can hold information in six basic data types:

• String: Zero or more Unicode characters surrounded by quotation marks.
• Number: Whole or decimal number. It may be signed, may contain a fractional part, and may use exponential E notation.
• Boolean: True or false value, specified by the keywords true or false.
• Null: An empty value, specified by the keyword null.
• Object: Collection of key-value pairs. Objects are declared with curly braces. Keys and values are separated by colons, while key-value pairs are separated by commas. Every key within an object must be unique.
• Array: Ordered list of zero or more elements of any data type, including null values, objects, and duplicates. Arrays are declared with square brackets and elements are separated by commas.

Nesting JSON Objects

JSON objects can hold other JSON objects inside of them, a technique called “nesting.” This is a common strategy for data architecture when isolating closely-related data in their own objects while preserving the context of the parent data.

// A JSON object containing a nested object with closely-related data
{
    "A": "B",
    "C": "D",
    "E": {
        "AA": 1,
        "AB": 2
    }
}

There is no limit to the number of times you can nest JSON objects inside each other, but it is usually best to keep the amount of nesting to 3 objects or below. This is because it can be difficult to determine which keys belong to each object, especially if nested objects contain similar information.

You can lay out nested objects on one line, but it’s often almost impossible to determine how the nested objects are related to each other at a glance this way, as the following example shows. The two JSON objects are equivalent, but one is much easier to handle.

// A JSON object containing 3 total levels of nested objects
{"A":"B", "C":"D", "E":{"AA":1, "AB":2, "AC":{"BB":3, "BC":4}}}

// A JSON object containing 3 total levels of nested objects
{
    "A": "B",
    "C": "D",
    "E": {
        "AA": 1,
        "AB": 2,
        "AC": {
            "BB": 3,
            "BC": 4
        }
    }
}

Javascript Objects vs. JSON Objects

JSON objects are simpler than Javascript objects because they have a more restricted set of values. Javascript objects, since they’re dynamically created inside a running computer program, can hold functions, references, and the results of calculations. A static data format like JSON cannot accurately represent these things.

Since JSON objects are static, you cannot access different elements individually the way you could with a Javascript object. JSON objects are plain text; they require conversion into Javascript objects before you can access or manipulate their content.

It is possible to convert JSON objects into Javascript objects using the JSON.parse() function. Conversion in the other direction, from Javascript objects into JSON objects, happens with the JSON.stringify() function.

Conclusion

JSON objects are a critical JSON data type. They hold fewer data types and simpler data than Javascript objects, but you can convert between the two object types if necessary. Since they’re built almost identically, conversion is easy with JSON.parse() and JSON.stringify().

Enroll in our Intro to Programming Nanodegree Program today to learn more about JSON arrays and other programming concepts.

Start Learning