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

[ad_1]
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:

Contact:

Next video:

JavaScript basics:

HTML/CSS basics:

Full Data playlist:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

39 responses to “8.4: Loading JSON data from a URL (Asynchronous Callbacks!) – p5.js Tutorial”

  1. tony .g Avatar

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

  2. הדיסלקט מדבר Avatar

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

  3. LUI LA Avatar

    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.

  4. Alexandra Montgomery Avatar

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

  5. Ashish Gaur Avatar

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

  6. Thabiso Phetla Avatar

    You are my BFF now good stuff

  7. sergio jimenez Avatar

    is this the same than ajax?

  8. Ooj Amit Srivastava Avatar

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

  9. Sophia Kornienko Avatar

    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

    Simon

  10. Anthony Ulloa Avatar

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

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

  11. Sagar Mali Avatar

    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

  12. Ahidul Islam Rajib Avatar

    Nice presentation.Thanks

  13. I'm Alpha Bet on me Avatar

    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!)

  14. Kaixo Music Avatar

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

  15. Laura Durieux Avatar

    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!

  16. DutchDeveloper Avatar

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

  17. Thomas Wolter Avatar

    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.

  18. Joy Cheng Avatar

    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!

  19. ashik vs Avatar

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

  20. The D4rkC00d3r Avatar

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

  21. john van deValt Avatar

    what editor is that ???!

  22. Jeff Lever Avatar

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

  23. blackpanther6389 Avatar

    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!

  24. CrescentFresh Avatar

    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!

  25. Don Pislik Avatar

    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:

    <script>
    $( function() {
    var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    ];
    $( "#tags" ).autocomplete({
    source: availableTags
    });
    } );
    </script>

    Any help would be highly appreciated 😀

  26. spliff Avatar

    his fucking backstage is setting like a goddamn news station

  27. Maher Zidan Avatar

    I can not believe that I have to see you more than I actually see the code behind you! I mean I am very grateful for people like yourself who puts their time and energy to teach us how to code however the experience of teaching should be a lot better…I tried many online courses and watched a lot of videos- truth be told I learned a lot but the energy I spent to get a clear understanding of it ,is huge compared to what I really got and that's basically because of the lack of realizing that online class does not have to be a like a normal class where students looking at there teacher.I wish one day somebody who is a multimillionaire entrepreneur will help educators and students by reimagine online programming classes and make a free well made app so we don't have to watch videos on YouTube but rather learn and interact in a class so our learning journeys will be measured by the knowledge we are getting and applying it in a practical way other that pausing a video every few second.
    Best,

  28. Dennis G D Avatar

    10:35 what exactly is a 'callback'?

  29. Srikanth Paluri Avatar

    Very straightforward way of teaching the concept. Thank you.

  30. deevioo Avatar

    var spaceData;

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

    }

    function gotData(data) {
    spaceData = data;
    };

    function draw() {

    background(0, 120, 200);

    if (spaceData) {
    randomSeed(4);
    for (var i = 0; i < spaceData.number; i++) {

    var x = random(50, 300);
    var y = random(50, 300)

    fill(random(100, 150));
    stroke(50);
    ellipse(x, y, 50, 50);

    fill(255);
    text(spaceData.people[i].name, x, y);

    fill(200);
    stroke(0);
    text(spaceData.people[i].craft, x, y + 12);
    };
    };

    };

  31. Felipe Emperor Avatar

    "Security is a thing!" – The Coding Train

  32. Sim Sim Avatar

    Where ccan I watch next video with the name of People _?

  33. Stephen Peters Avatar

    Who in the heck dislikes these videos?

  34. paul spry Avatar

    is it possible if you can run it by me on how to put the names next to the dots?

  35. Andy Gray Avatar

    If you look at the video from 18.25 onwards (where you introduce randomSeed(4)) you appear to have killed a spaceman! (only 5 circles)

  36. Mike & Drea Avatar

    So when drawing in P5 the origin is the top-left corner, right? Seems like it should be the bottom-left if X and Y are both positive numbers.

Leave a Reply

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