Skip to content

Loading JSON#

JSON is probably the most common format for any kind of data transfer on the web right now. It is short for "JavaScript Object Notation", and as the name suggests, it meshes very well with JavaScript1 and is fairly easy to look at and write. It is now so common that you will always find some way of importing or exporting stuff in a JSON format, and many other file formats are directly based on JSON's specifications.

If you picked up on the "Object" in JSON, you'll have very few problems picking this up:

klaus.json
{
    "name": "Klaus",
    "occupation": "Forklift Operator",
    "age": 40
}

This is still a plain text file, but it has a lot more structure. We use the curly braces { and } to enclose objects. In those objects, we can list as many keys (also called "properties" or "attributes") as we want. These always must be in " double quotes. Here, we have three keys (name, occupation and age). A key is followed by a : colon and then by a value. That value can be a string (enclosed in " double quotes like "Klaus" and "Forklift Operator") or a number (which needs no quotes like 40). Each of these pairs is separated by a comma.

Arrays and Objects Can Also Be Values#

Our example above is a perfectly fine, if simple, object. An Object itself can be a value, too! Let's put Klaus in a larger example:

company.json
{
    "name": "Prehn&Wagner Logistics Inc.",
    "location": "Buchholz, Germany",
    "established": 1980,
    "employeeOfTheMonth": {
        "name": "Klaus",
        "occupation": "Forklift Operator",
        "age": 40
    }
}

With Objects in Objects, we can create much more complex data structures. In this case, we store the employee information within the company information. The key "employeeOfTheMonth" contains a value, and this value happens to be a whole object itself! We can also use Arrays in JSON. Let's put in a few more employees:

company.json
{
    "name": "Prehn&Wagner Logistics Inc.",
    "location": "Buchholz, Germany",
    "established": 1980,
    "employees": [
        {
            "name": "Klaus",
            "occupation": "Forklift Operator",
            "age": 40
        },
        {
            "name": "Werner",
            "occupation": "Warehouse Clerk",
            "age": 45
        },
        {
            "name": "Paul",
            "occupation": "Work Safety Expert",
            "age": 51
        }
    ]
}

Here we now have a key called "employees" and it contains an array (recognizable by the [] square brackets!) and this array contains three objects.

But How Do I Use This?#

Processing lets you load a JSON Object from a file with loadJSONObject() which returns an instance of JSONObject. That instance can then give you all the stored values. We're using .getString() on it. Let's use our most complicated JSON file but only use the company name in this first example:

Examples in the example repository

Since these examples are all made up of several files, you will find them in the examples repository for easier access.

loading_json_company.pde
JSONObject company;

void setup() {
    size(500, 500);
    company = loadJSONObject("company.json");
}

void draw() {
    background(0);
    textSize(40);
    textAlign(CENTER, CENTER);
    text(company.getString("name"), width / 2, height / 2);
}

In our example, this would print "Prehn&Wagner Logistics Inc." to the screen. Just like before, this large detour is often worth the effort. You get to define things outside of your main program in a way that could be created or modified by another piece of software.

Besides .getString(), there are also methods to get other data types - these must match the type of your variable (and of course the stuff that's actually in your JSON file!).

And there are also set* methods which would let you modify the values.

  1. Warning: JavaScript and Java are two extremely different languages! ↩