Intermediate Programming @Woodbury

Working with JSON Data

JSON data

Data formats

Data can be saved in many kinds of formats.

  • CSV - comma separated values
  • XML - an older standard
  • JSON - Javascript Object Notation
  • text file - each line of the file containing a different data point
  • a web page


JSON is a good standard way of working with data files and is based on how Javascript literal objects are defined.

JSON Type Examples

Basic Example

let car = {
  name: 'Saab',
  color: 'red'
  year: 2016

JSON String

{ "name":"Ricardo" }

JSON Number

{ "age":77 }

JSON Object

  "person":{ "name":"Shankar Patel", "age":40, "city":"Los Angeles" }

Accessing JSON with Dot Notation

character = { "name":"Shredder", "age":30, "home":"TerrorDome" };

enemy =;

Accessing JSON with Bracket Notation

enemy = character["name"];

Nested JSON

Very common!


rappers = {
    "Migos": {
Access data with dot or bracket notation.
 let favoriteRapper = rappers.Migos.rapper2;
Change data value
rappers.Migos.rapper2 = "Nardwuar";

JSON Array

let class = {
  "students":[ "Mohammed", "Camille", "Joseph", "Ben", "Zane", "Kyro", "Kane", "Edi", "Tom", "Matthew", "Joab", "Sungmin Lee", "Brian" ]

let closestStudent = class.students[11]; // Sungmin Lee

Loading JSON with P5DOM

function preload(){
    catBreeds = loadJSON("catBreeds.json");

function setup(){
  text(, 100, 200);