10.4: Loading JSON data from a URL (Asynchronous Callbacks!) – p5.js Tutorial

About this tutorial:

Video duration: 19:29
This video covers begins the process of working with APIs. The first step is just using a URL instead of a local JSON file. How does this change your code? How do you use a callback to known when the data is ready?

All examples:


Next video:

JavaScript basics:

HTML/CSS basics:

Full Data…

Incoming search terms:

Post Author: OfficeTutes.com

Apple lover, ICT and LEAN consultant, MS Office lecturer My other website with video tutorials - Tutorials, guides and news for iPhones and iPads

30 thoughts on “10.4: Loading JSON data from a URL (Asynchronous Callbacks!) – p5.js Tutorial

    Lan Le

    (December 15, 2018 - 5:57 pm)

    How would this work dynamic? You don’t know how many url call to make and at each stage you need to build next url

    Erci Moisa

    (December 15, 2018 - 5:57 pm)

    LOL, There coming for me 5:30


    (December 15, 2018 - 5:57 pm)

    Great video, never too much! keep it up. Thanks!!!

    Traci Peurasaari

    (December 15, 2018 - 5:57 pm)

    How do you include an api key that isn't in the string needs to be sent as a header – token

    Satyam Sharma

    (December 15, 2018 - 5:57 pm)

    When I heard the siren at 5:30, I knew Dan was gonna comment something about it XD

    Neville N

    (December 15, 2018 - 5:57 pm)

    Great value Sir. I was confused about JSON until I found your series. I am trying to implement it into catching JSON info from Shopify webhook to Google sheets but it is not working out. I am trying to do it by creating a google script and running that as an web app. I then get the url and set it to the webhook notification in Shopify. I have read the guides available on the sheets resources and also looked up different sites, but I end up confused as none of the codes shown are working. Could you please provide some pointers?

    Rensky Macabecha

    (December 15, 2018 - 5:57 pm)

    Sir I often see u making .js thing, I currently studying , BSed Math because that is what my parents want. But my passion is computer related course. So what I did is everytime I finish my all project on my taken course. I do some self study in this thing. I always watch visit ur page , because I like how u teach. My question is which is more harder to make? Js? Or Css?


    (December 15, 2018 - 5:57 pm)

    saved by a random stranger on the internet. THANK YOU 🙂


    (December 15, 2018 - 5:57 pm)

    when i try this content in p5 web editor ,it seems that the request content must served over https,becouse the p5 web editor is served over https, how can i fix that?


    (December 15, 2018 - 5:57 pm)

    Today there a only 3 people in space 😀

    Austin Burke

    (December 15, 2018 - 5:57 pm)

    You’re seriously one of the best instructors I’ve stumbled upon. Do you happen to have a video describing how to conditionally filter JSON data? Such as returning all objects in the data that contain a key with a particular value?


    (December 15, 2018 - 5:57 pm)

    I tried but it doesn't work for me. The chrome dev console report this: p5.min.js:1 Mixed Content: The page at 'https://editor.p5js.org/banjer71/sketches/B1Yhaqoqm' was loaded over HTTPS, but requested an insecure script 'http://api.open-notify.org/astros.json?callback=jsonp_1539187628249_80826'. This request has been blocked; the content must be served over HTTPS.

    2p5.min.js:1 Uncaught (in promise) Error: JSONP request to http://api.open-notify.org/astros.json failed
    at HTMLScriptElement.n.onerror (p5.min.js:1)

    Is there a way to sort it out ? I am using the 5pjs online editor but also with the complete programme that I downloaded it doesn't work!!

    Philippe Anglade

    (December 15, 2018 - 5:57 pm)

    18:49 : only 5 circles ? or 2 of them have same coordinates ?

    Jacob Schneider

    (December 15, 2018 - 5:57 pm)

    Thanks so much for good content, but is there a video where he does this in Java?

    Xavier Maldonado

    (December 15, 2018 - 5:57 pm)

    5:37 😂😂😂😂🤣🤣🤣🤣😆😆😆😆😆

    Arpit Chhabra

    (December 15, 2018 - 5:57 pm)

    I'm speechless

    Gesa Voip

    (December 15, 2018 - 5:57 pm)

    So this works only in P5 online editor.. ? How can I include it in NodeJS?


    (December 15, 2018 - 5:57 pm)

    hi. Daniel. I have a question.
    The computer did not get the data even though it did the same thing.
    I use p5.js Wev Editor.

    function setup() {
    loadJSON("http://api.open-notify.org/astros.json", gotData, 'jsonp');

    function gotData(data)
    function draw() {


    Lucky Tech Tricks

    (December 15, 2018 - 5:57 pm)

    hello sir I am not able to find the bug in this program………..please check the code

    Таиров Ринат

    (December 15, 2018 - 5:57 pm)

    Thanks, You nice teacher)

    Jhonatan Perez

    (December 15, 2018 - 5:57 pm)

    loadJSON and "Access-Control-Allow-Origin" Error

    Hi, I am working on a p5.js project. I am trying to load a JSON File from an external server. This is the code I am using
    function setup(){
    loadJSON("https://api.famobi.com/feed?a=A-4EGU6&channel=arcade", gotData, "jsonp");
    function gotData(){
    alert("JSON loaded");
    But when I run the code on editor.p5js.org I get the error "Access-Control-Allow-Origin".

    I have done some research, I found a chrome extension called Allow-Control-Allow-Origin: * at https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
    which a allows me to load the JSON file

    But my questions are:
    Is there a way to load the JSON file without the Chrome extension?
    If I upload my project to a website, how can the user see the content if they don't have the chrome extension called Allow-Control-Allow-Origin?
    Thanky you.


    (December 15, 2018 - 5:57 pm)

    You, my friend, are the most interesting tutor ever!

    Bhawna Saraswat

    (December 15, 2018 - 5:57 pm)

    I want to create tables in PostgreSQL database, bcoz my existing database backup is in API that retrieve the Jason format data, and i want to create new database according to existing API by programming in c#

    Chris Mr

    (December 15, 2018 - 5:57 pm)

    18:28 someone left space

    Ty Jacobsen

    (December 15, 2018 - 5:57 pm)

    Are you available for hire for a project?

    Marc Carroll

    (December 15, 2018 - 5:57 pm)

    3:06 are you saying meow?


    (December 15, 2018 - 5:57 pm)

    is there anyway to subscribe to this channels 100 times 😀

    neale brown

    (December 15, 2018 - 5:57 pm)

    Having trouble with this tutorial now, as it seems that the api is coming from an http source and chrome etc don't play well with these (it needs to be served from https), the jsonp thing doesn't seem to work either.


    (December 15, 2018 - 5:57 pm)

    How do you know how many parameters in the callback? for instance, http callback has parameter request and response. How would you write it in the long hand format and how are the two parameters passed in?

    priyanka nidhi

    (December 15, 2018 - 5:57 pm)

    I have string value and also URL how to upload file and hitt plz tell me though the HTTP connection

Leave a Reply

Your email address will not be published. Required fields are marked *