Trouble with code linking to JSON file in p5.js?

p5.js Coding Questions
1

Hi everyone, so I’ve just changed my JSON data so that I can link it my “date” as well as the “hours”. So I wrote out this section two lines to get the data working, but so far no luck. Was wondering if anyone can help?

 for (SundayHours=0; SundayHours<data.Sunday.length; SundayHours++){
     
  for (whichHour=0; whichHour<data.hours.length; whichHour++){

CODE:

var data; 
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol;
var whichHour=0; 
var sizeMultiplier = 10; 
var time, size;
var daycounter= 1;
var SundayHours=0;


function preload (){
  data =loadJSON("Sunday.json");
}
function setup() {

 
   createCanvas (windowWidth, windowHeight);
   background (255);

   instagramCol = color (142, 68, 173, 90);
   messengerCol = color (133, 193, 233, 90);
   snapchatCol = color (247, 220, 111, 90);
   facebookCol = color (231, 76, 60, 90);
   emailCol = color (0); 
   frameRate(0.5);

   }
     
function draw () {

   for (SundayHours=0; SundayHours<data.Sunday.hours.length; whichHour++){
     
   for (whichHour=0; whichHour<data.SundayHours.hours.length; whichHour++){
    
    
    fill (instagramCol);
    size = data.Sunday[SundayHours].hours[whichHour].instagram*sizeMultiplier
    ellipse (random(600, 800), random (150, 300), size, size);
   
    }
  }
}

JSON FILE:

{
  "Sunday": {
    "hours": [
      {
        "time": "12:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "1:00 am",
        "instagram": 1,
        "messenger": 2,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 3
      },
      {
        "time": "2:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "3:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "4:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "5:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "6:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "7:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "8:00 am",
        "instagram": 2,
        "messenger": 2,
        "snapchat": 0,
        "email": 1,
        "facebook": 0,
        "totalNotification": 5
      },
      {
        "time": "9:00 am",
        "instagram": 2,
        "messenger": 0,
        "snapchat": 0,
        "email": 1,
        "facebook": 0,
        "totalNotification": 3
      },
      {
        "time": "10:00 am",
        "instagram": 1,
        "messenger": 2,
        "snapchat": 3,
        "email": 0,
        "facebook": 2,
        "totalNotification": 8
      },
      {
        "time": "11:00 am",
        "instagram": 0,
        "messenger": 2,
        "snapchat": 7,
        "email": 2,
        "facebook": 0,
        "totalNotification": 11
      },
      {
        "time": "12:00 pm",
        "instagram": 0,
        "messenger": 1,
        "snapchat": 2,
        "email": 0,
        "facebook": 0,
        "totalNotification": 3
      },
      {
        "time": "1:00 pm",
        "instagram": 4,
        "messenger": 0,
        "snapchat": 0,
        "email": 1,
        "facebook": 0,
        "totalNotification": 5
      },
      {
        "time": "2:00 pm",
        "instagram": 2,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 2
      },
      {
        "time": "3:00 pm",
        "instagram": 0,
        "messenger": 2,
        "snapchat": 4,
        "email": 0,
        "facebook": 0,
        "totalNotification": 6
      },
      {
        "time": "4:00 pm",
        "instagram": 5,
        "messenger": 0,
        "snapchat": 3,
        "email": 0,
        "facebook": 0,
        "totalNotification": 8
      },
      {
        "time": "5:00 pm",
        "instagram": 1,
        "messenger": 0,
        "snapchat": 4,
        "email": 0,
        "facebook": 0,
        "totalNotification": 5
      },
      {
        "time": "6:00 pm",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
      },
      {
        "time": "7:00 pm",
        "instagram": 1,
        "messenger": 11,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 12
      },
      {
        "time": "8:00 pm",
        "instagram": 0,
        "messenger": 2,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 2
      },
      {
        "time": "9:00 pm",
        "instagram": 0,
        "messenger": 1,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 1
      },
      {
        "time": "10:00 pm",
        "instagram": 7,
        "messenger": 1,
        "snapchat": 21,
        "email": 0,
        "facebook": 0,
        "totalNotification": 29
      },
      {
        "time": "11:00 pm",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 3,
        "email": 0,
        "facebook": 0,
        "totalNotification": 3
      }
    ]
  }
2

Why are you making a new topic about this?
A couple of things:

  • The JSON file misses an end curly bracket.
  • In this line, you are expecting that Sunday has an array. It hasn’t. Only hours has an array. data.Sunday[SundayHours].hours[whichHour].instagram*sizeMultiplier
  • data.Sunday.length will be undefined because again Sunday isn’t an array.
2 Likes
3
  • The property Sunday points to a JSONObject containing 1 property named hours.
  • Therefore you can’t use numerical-index access for it!
  • Now the internal property hours indeed points to a JSONArray.
  • So you’re right using numerical-index access for that property.
  • Each element in hours is a JSONObject.
  • Seems like you’re particularly interested in accessing the instagram property’s value from each JSONObject element.
  • So I’ve made a demo sketch called “JSON Weekdays Access” & hosted it online.
  • Although you should run it locally or somewhere else in order to view its entire output.
  • That sketch grabs both time & instagram properties and logs them on the page & console grouped by weekdays.

BtW, I’m using the JSON content from my previous answer:

OpenProcessing-UserContent.s3.AmazonaWS.com/files/user22279/visual975186/h4bc21ee7a477aaa173e99631b0328e4d/weekdays.json

1 Like
4

Okay, so since my “Sunday” only contains the 1 object which is “hours” and it’s not an array, how would I write it out onto a sketch that only accesses the “Sunday” object.

Would it be var Sunday = data.Sunday and then var Monday = data.Monday ???

Sorry I appreciate all the help, but I’m still confused

5

When the data object has a property Sunday that isn’t an array, you just write a dot.
So:
data.Sunday[SundayHours].hours[whichHour].instagram* sizeMultiplier
becomes:
data.Sunday.hours[whichHour].instagram* sizeMultiplier

1 Like
6

Adding to @noel’s reply I’m gonna try to give you a more step-by-step answer. :foot:

  • A JSON file can only have 2 types of containers: JSONObject & JSONArray.
  • Both containers can have other JSONObject & JSONArray inside them too.
  • We recognize a JSONArray container by its pair of square brackets [].
  • And a JSONObject container by its pair of curly braces {}.
  • A JSONArray behaves just like a regular JS Array, and we can use the accessor operator [] specifying the numerical index of the desired element we wanna access.
  • However we don’t use numerical indices to access a value from a JSONObject container.
  • Instead a JSONObject container got string properties which replace numerical indices, exactly like a regular JS Object works.
  • We can choose 2 types of accessor operators for it: the dot . or the square braces [].
  • If we use the dot . operator we follow it w/ the name of the property like a regular JS variable name.
  • But w/ the square braces [] operator we place the name of the property as a string inside the braces.
  • The final goal of each JSON access is to reach a value which is neither a JSONObject nor a JSONArray container.
  • For example in your JSON file each instagram property contains a numerical value instead of another JSON container.
  • The hard work is knowing how to navigate each JSON container until we reach a desired target value.
  • Let’s say you want the numerical value from the property instagram belonging to the 14th JSONObject from the hours JSONArray from the Sunday JSONObject.
  • Notice that your JSON file’s outer container is a JSONObject b/c it’s initially wrapped up w/ curly braces {}.
  • So we already know that we won’t use a numerical index to access it but a string property.
  • Either as data.Sunday via dot . operator or as data['Sunday'] via square brackets [] operator.
  • After that 1st step access we’re gonna get another JSONObject which contains only 1 property named hours.
  • That property hours is itself a JSONArray container.
  • Let’s go ahead then and place it in a variable named jsonArray:
    const jsonArray = data.Sunday.hours;
  • Each element value inside that JSONArray is a JSONObject again.
  • Each of those JSONObject containers has 7 properties:
    time, instagram, messenger, snapchat, email, facebook, totalNotification.
  • But for now we’re interested in the value stored in the property instagram belonging to the 14th JSONObject container.
  • So we finally get the value we want like this:
const INDEX = 13, // matches time "1:00 pm" or "13:00"
      jsonArray = data.Sunday.hours,
      numberOfInstagrams = jsonArray[INDEX].instagram; // 14th element

console.log(numberOfInstagrams); // should log value 4
  • We can also get it w/ 1 single statement:
    console.log(data.Sunday.hours[13].instagram); // should log value 4
  • Alternatively using only the square brackets [] operator:
    console.log(data['Sunday']['hours'][13]['instagram']); // should log value 4

That’s all! Any further doubts just ask again specifying exactly where you don’t get it. :nerd_face:

2 Likes