# How do I draw a circle based on my JSON data information in p5.js?

**URL:** <https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 27, 2020, 4:28am UTC](https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146 "2020-09-27T04:28:05Z")\
**Posts on this page:** 3\
**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 27, 2020, 4:28am UTC](https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146/1 "2020-09-27T04:28:05Z")

</div>

So, I’m trying to grab data from my JSON file to my code and display the circle size according to the number on my JSON file.

So far this is the code.

var data;  
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol;  
`var sizeMultiplier = 20;`  
var time, size;

function preload (){  
data =loadJSON (“Sunday.json”);  
}  
function setup() {  
createCanvas (windowWidth, windowHeight);  
background (255);  
instagramCol = color (142, 68, 173);  
messengerCol = color (133, 193, 233);  
snapchatCol = color (247, 220, 111);  
facebookCol = color (118, 215, 196);  
emailCol = color (178, 186, 187);  
}  
function draw () {  
//12:00 am data  
fill (instagramCol);

```auto
size = data.[1].[1]*sizeMultiplier; // looking at the 2th array and the first app which would be Messenger. the number is 2, so therefore it would be 2 X 20 right?
circle (500, 500, size);

```

}  
so this comes up with an error saying "Expected an identifier and instead saw ‘[’

I also tried the code this way as well. `size = data[1][1]*sizeMultiplier;`  
This way works, but nothing shows on screen…I also check the console and no errors have popped up.

This is the JSON code

[  
{  
“12:00 am”: {  
“instagram”: 0,  
“messenger”: 0,  
“snapchat”: 0,  
“email”: 0,  
“facebook”: 0,  
“totalNotification”: 0  
}  
},

```
{
     "1:00 am": {
    "instagram": 1,
    "messenger": 2,
    "snapchat": 0,
    "email": 0,
    "facebook": 0,
    "totalNotification": 3
     }
},
]
```

---

<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 27, 2020, 11:13am UTC](https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146/2 "2020-09-27T11:13:35Z")

</div>

> **[Best JSON Viewer and JSON Beautifier Online](https://CodeBeautify.org/jsonviewer)**
>
> Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.

  
[Discourse.Processing.org/faq#format-your-code](http://Discourse.Processing.org/faq#format-your-code)

```javascript
[
  {
    "12:00 am": {
      "instagram": 0,
      "messenger": 0,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 0
    }
  },
  {
    "1:00 am": {
      "instagram": 1,
      "messenger": 2,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 3
    }
  }
]

```

Given the JSON file is initially wrapped up w/ square brackets `[]` it means its outer datatype is JSONArray.

And you load & store that JSONArray in the variable _data_.

That JSONArray contains 2 entries wrapped up w/ curly brackets `{}`.  
Thus those entries are of datatype JSONObject.

Seems like you wanna access the property _messenger_ inside the 2nd JSONObject which contains a number value.

Each of those 2 JSONObject entries got 1 property which is a time string that points to another JSONObject.

The time string property from the 2nd JSONObject is named “1:00 am”.

So now we finally got all the “ingredients” in order to reach that number value `2`:  
`const value = +data[1]['1:00 am'].messenger; // should grab value 2`

We can also use the operator `[]` instead of `.` to access property _messenger_:  
`const value = +data[1]['1:00 am']['messenger']; // should grab value 2`

If you need more JSON property access examples you can take a look at these 3 online sketches:

> **[JSON Open-Notify ISS](http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e)**
>
> GoSubRoutine’s Block 7a567f0510b338b6d0fc1ef53f24f10e

  

> **[JSON Religions](https://Bl.ocks.org/GoSubRoutine/9aa9cd00000e331612c8e557b5dd28f0)**
>
> GoSubRoutine’s Block 9aa9cd00000e331612c8e557b5dd28f0

  

> **[OpenWeatherMapJSON](https://Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45)**
>
> GoSubRoutine’s Block 5fbc03e019c53254a2ba7e7fd3318b45

---

<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 27, 2020, 11:18am UTC](https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146/3 "2020-09-27T11:18:31Z")

</div>

Thank you so much for the explanation this helps a lot! But it doesn’t really fully solve my problem in a way, because I’m trying to grab that value “2” to determine the size of the circle.