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

**URL:** <https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 30, 2020, 1:42pm UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241 "2020-09-30T13:42:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 30, 2020, 1:42pm UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/1 "2020-09-30T13:42:05Z")

</div>

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?

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

```

CODE:

```auto
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:

```auto
{
  "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
      }
    ]
  }

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 30, 2020, 3:28pm UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/2 "2020-09-30T15:28:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 30, 2020, 4:38pm UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/3 "2020-09-30T16:38:07Z")

</div>

> [@sam101](#):
>
> `data.Sunday[SundayHours].hours[whichHour].instagram*sizeMultiplier`

- 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.

> **[JSON Weekdays Access - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/975186)**

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

> [@Trouble Writing JSON code?](https://discourse.processing.org/t/trouble-writing-json-code/24232/2):
>
> In order to help me out I’ve used a JSON beautifier service site: lipstick This is what I’ve come up with by duplicating the whole property “Sunday” as “Monday”: bulb { "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…

[OpenProcessing-UserContent.s3.AmazonaWS.com/files/user22279/visual975186/h4bc21ee7a477aaa173e99631b0328e4d/weekdays.json](http://OpenProcessing-UserContent.s3.AmazonaWS.com/files/user22279/visual975186/h4bc21ee7a477aaa173e99631b0328e4d/weekdays.json)

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [October 1, 2020, 6:02am UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/4 "2020-10-01T06:02:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 1, 2020, 7:54am UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/5 "2020-10-01T07:54:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 1, 2020, 1:45pm UTC](https://discourse.processing.org/t/trouble-with-code-linking-to-json-file-in-p5-js/24241/6 "2020-10-01T13:45:51Z")

</div>

> [@sam101](#):
>
> 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.

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

- 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:

```javascript
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. 🤓