• Wednesday , 15 August 2018

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

Code Canyon

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: https://github.com/shiffman/Video-Lesson-Materials

Contact: https://twitter.com/shiffman

Next video:

JavaScript basics:

HTML/CSS basics:

Full Data playlist:

Help us caption & translate this video!


Original source

3d Ocean

Related Posts


  1. Sam Rose
    October 7, 2017 at 10:59

    caution: tl;dr posted at head…

    Short : Diggin' the videos. This is my goto when I'm working through understanding a concepts and need visual explanations for stackoverflow/serverfault issues.

    Thanks for being vulnerable (emotionally) enough to make a video about your knowledge of this and explain a lot of this stuff coherently. It takes a great deal of courage to stand up in front of people and do this, so I certainly can relate with that performance anxiety. It's nice to have an instructor who's not overly ego-driven and belittling with sharing their knowledge. I'm relatively intimidated by this new realm of deep-diving i'm exploring; To know there are experts who I can relate with and who are trying alternative methods to spread their knowledge is freakin awesome. Really enjoying the green-screen/example/visual illustration educating style. Thanks for being real about who you are and keep those videos coming.

  2. Karen Barseghyan
    October 7, 2017 at 10:59

    Hi. Why is my Node.js terminated? Thanks.

  3. Devin Chrystal
    October 7, 2017 at 10:59

    38 seconds in and my mind is blown

  4. tony .g
    October 7, 2017 at 10:59

    @The Coding Train I need to read a json from webservice using HTML. The service returns json and it is working fine with Postman. Could you please help me in identifying where the issue is. I am trying out ajax calls.

  5. הדיסלקט מדבר
    October 7, 2017 at 10:59

    which library do i need to make that work. i have some issues

  6. LUI LA
    October 7, 2017 at 10:59

    You are just and amazing programmer great job!!!! I don't know how many years you've worked for being so amazing like that. However, for me, you are one of the best developers that I've watch his video.

  7. Alexandra Montgomery
    October 7, 2017 at 10:59

    You're awesome, Literally about to watch Every video you have. Amazing dude.

  8. Ashish Gaur
    October 7, 2017 at 10:59

    hi boss can you help me to know how today amazon kind of website whole content from json response without refresh page?

  9. Thabiso Phetla
    October 7, 2017 at 10:59

    You are my BFF now good stuff

  10. Sergio Jimenez
    October 7, 2017 at 10:59

    is this the same than ajax?

  11. Ooj Amit Srivastava
    October 7, 2017 at 10:59

    How can I do this without P5.js, JQuery or AJAX ie. in plain JavaScript?

  12. Sophia Kornienko
    October 7, 2017 at 10:59

    I'm sorry, but I think, the string "false" will evaluate to true! An empty string will evaluate to false.

    Tutorial about booleans: https://www.w3schools.com/js/js_booleans.asp
    Tutorial about type conversion: https://www.w3schools.com/jsref/jsref_type_conversion.asp


  13. Anthony Ulloa
    October 7, 2017 at 10:59

    Thanks for the explanation, very helpful, thanks to god I jumped into this video!

    P.D: Daniel is cute! Greetings from CR!

  14. remusomega
    October 7, 2017 at 10:59


  15. Sagar Mali
    October 7, 2017 at 10:59

    why always prefer p5.js?? are you the one who invented it? can't you use jQuery or AJ or something which is widely used by developers

  16. Ahidul Islam Rajib
    October 7, 2017 at 10:59

    Nice presentation.Thanks

  17. I'm Alpha Bet on me
    October 7, 2017 at 10:59

    In a more modern way, you can now use the Fetch API:

    fetch( " test.json " )
    .then( response => response.json() )
    .then( json => console.log( json ) );

    All modern browsers support Fetch API. (Internet Explorer doesn't, but Edge does!)

  18. Kaixo Music
    October 7, 2017 at 10:59

    Is this possible with processing? Or is anything similar possible?

  19. Laura Durieux
    October 7, 2017 at 10:59

    Thank you so much for these videos! It's the third I'm looking without a break! You're extraordinary! I love you! And don't be ashamed, you have a beautiful voice when you sing!
    Thanks to you again!

  20. NSF
    October 7, 2017 at 10:59


  21. DutchDeveloper
    October 7, 2017 at 10:59

    is there a way to load A json file such as twitch.tv/kracken for a Discord nodemon.js bot?

  22. Thomas Wolter
    October 7, 2017 at 10:59

    This is by far the best tutorial I have seen about JSON and API. I only wished that you were rather working with jQuery ajax instead of P5.js.

  23. Joy Cheng
    October 7, 2017 at 10:59

    I was really struggling with a lot of the basic concepts like callback, jsonp etc while trying to finish my building a quote machine FCC challenge. Then I came across your video … then boom — magic happened. doubts cleared. You make coding so much fun and your energy is contagious! I'm now much more prepared to tackle the challenge thanks to you. Already subscribed and can't wait to watch the other videos! Thanks again!

  24. ashik vs
    October 7, 2017 at 10:59

    where did you run this program? i tried to run in chrome but ot getting any output! 🙁

  25. The D4rkC00d3r
    October 7, 2017 at 10:59

    Awesome videos. Whats the name of the P5.js gui tool that you use? is there a linux version?

  26. john van deValt
    October 7, 2017 at 10:59

    what editor is that ???!

  27. Jeff Lever
    October 7, 2017 at 10:59

    This video has convinced me to purchase stock in starbucks. Great video sir 🙂

  28. blackpanther6389
    October 7, 2017 at 10:59

    This video was very helpful in knowing what to do with data that can only be retrieved in a callback function like the data in Firebase database. Thanks, Dan!

  29. CrescentFresh
    October 7, 2017 at 10:59

    Do you have, or plan on making any vanilla JS API tutorials? I know this is specific to p5 but I'm hoping to learn about API calls and handling the returned JSON data within vanilla JS. Or if anyone has any links to videos related to this, it would be greatly appreciated!

  30. Don Pislik
    October 7, 2017 at 10:59

    FUCK IT! An Oct 30, 2015 Video with 39,004 views instead of 390,004 or more 🙁 Keep em up @The Coding Team, this is how I always handle my business English class 🙂

    Ain't sure how to get away with the jQueryUI autocomplete feature 🙁 Here's my JSON File: programs.json and below is my code with a few json rows and It'd be insane to have a million rows hard-coded in the function. My question is how can I implement the autocomplete from my programs.json file and / or from my Postgres database. It's a Django project though:

    $( function() {
    var availableTags = [
    $( "#tags" ).autocomplete({
    source: availableTags
    } );

    Any help would be highly appreciated 😀

Leave A Comment

You must be logged in to post a comment.