JSON Basics


This tutorial covers the following:

  1. The JSON format
  2. the loadJSON function
  3. the JSON.Stringify() function
  4. Querying JSON
  5. Recap with Shiffman or the textbook.
  6. Exercise

1) JSON format

As we have seen, one type of Javascript object, the object literal, consists of name value pairs and methods. It is very similar in syntax to another data structure in Javascript called JSON. JSON stands for JavaScriptOjectNotation and is used for storing data – its just like CSV or txt data, just a different format.

JSON data can be included in your sketch in a couple of ways. As a stand alone file that can be loaded into your sketch or it can be formatted data coming from an online API.

As we have seen, an object literal looks like this. Where name value pairs are separated by commas and only strings are in double quotes.

var flower =  {name: "sunflower", height: 30};

A valid JSON object looks like this. Notice how JSON is a string!

 var flower = '{"name": "sunflower", "height": 30,   "color":"#FFFF00"}';

We usually load in JSON data as an external file or request it from an API. A JSON file will look like the following. Notice how the variable is gone along with the quotations around the brackets.

{
    "name": "sunflower", 
    "height": 30,   
    "color":"#FFFF00"
}

You can check your JSON is correctly formatted using an online formatter . There are many online tools that do this like this one. I also recommend that you install a JSON formatter browser extension to your browser of choice. If you are using Chrome, then download and install this one. This will format any JSON viewed in the browser so that it is human readable.

The JSON format can get very complicated. Look at how in this file, in the second name value pair, the value is another array (marked by the [] brackets ). And in this array, each spot has another block of name value pairs. And yes, it can get even more complicated than that.

2) The loadJSON function

To use any sort of JSON, you will need the loadJSON function.

Read the description at that link. As it says, this functions makes an object that contains the JSON data from your file or from the web. You will need to use it in preload as it needs to load the data before the sketch starts.

See this example:

As you can see above, I am hosting my JSON file on github. But you can also load a JSON file into OpenProcessing for use (as shown in the example over here). The loadJSON function doesn’t actually care where the data is coming from (from a file or from a url).

3) Stringify

Remember loadJSON creates an object. If you try to print out in the above example if you try to print out flower to the console you will not see the data. To do this, use the JSON.stringify function to converts the flower object back to a string so you can print the whole thing if you want to.

JSON.Stringify(JSONobject);

Uncomment line 16 in the example above or here, to see it in use.

4) Querying JSON

The JSON file structure is queried by using the dot operator. Eg. to get the value associated with each name, use the dot operator

In the above example

flower.color

returns the value associated with the name color.

Below is a more complex example where the json is an array containing json blocks.

[  
   {  
      "name":"sunflower",
      "color":"#FFFF00",
      "height":30
   },
   {  
      "name":"sunflower",
      "color":"#FFFF00",
      "height":30
   }
]

If this was loaded into an object called flower2, what would the following return?

flower2[1].color
flower2[0].height

Here is another example, where the second name value pair, contains another list of name value pairs!

{  
   "type":"FeatureCollection",
   "metadata":{  
      "generated":1510210455000,
      "url":"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&limit=1&orderby=time",
      "title":"USGS Earthquakes",
      "status":200,
      "api":"1.5.8",
      "limit":1,
      "offset":1,
      "count":1
   }
}

Querying JSON exercise:

5) Recap: Shiffman videos or the text book

  • This series deals with JSON and working with APIs. Here we have covered roughly up to 10.5.
  • In your p5js textbook this material is covered from Pages 187-194.

Review if you are confused.