# 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:** 1\
**Showing post:** 2

<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

---

_[View the full topic](https://discourse.processing.org/t/how-do-i-draw-a-circle-based-on-my-json-data-information-in-p5-js/24146)._