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

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


Comments

  1. Post
    Author
  2. Post
    Author
    Ashley Dadd

    Hi – It takes something exceptional for me to comment on YouTube videos. You sir are EXCEPTIONAL! I love your energy, the content is awesome and that format and post production is next level. Well done and thank you so much. Ashley – Sydney Australia

  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
    Dreams N Motion

    can you make another tutorial on how to make a google spreadsheet data into a live json url and then use that live json url as json source for visualizing the data in a web page as html element? so that the final result will be using a google spreadsheet to visualize its data in a website.

  6. Post
    Author
  7. Post
    Author
    Raquelline Curvelo

    Watching, learning and having fun in 2018! Thanks so much for saving my life so many times! <3

  8. Post
    Author
  9. Post
    Author
    Yi-hsiu Lee

    Tried this example today and could get the data without the parameter "jsonp". hmm kind of interesting since some change has been made again.

  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
    Hakim Kac

    thank you 🙂 if the number will be 7 .. will be there another ellipse added in the canvas automatically or after the refresh of the page (sorry about my bad English)

  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
    PrincessEsme

    Hey Dan! I have 2 questions :
    How do you query data from a Jason file using native JavaScript?
    Can I use free API’s like the one used in this video in my web app for free?
    Thanks for the videos, they help ALOT! 🙂

  20. Post
    Author
  21. Post
    Author
    michaelaaronw

    Awesome tutorial! Btw for anyone interested in doing this with vanilla JS rather than p5 or jQuery you can use XMLHttpRequest() or now with ES6 its even easier with fetch()

  22. Post
    Author
  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
    azndoodle1

    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?

  26. Post
    Author
    neale brown

    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.

  27. Post
    Author
  28. Post
    Author
  29. Post
    Author
  30. Post
    Author
  31. Post
    Author
  32. Post
    Author
    Jhonatan Perez

    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.

  33. Post
    Author
  34. Post
    Author
  35. Post
    Author
    김대원

    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)
    {
    println(data);
    }
    function draw() {

    }

  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
  39. Post
    Author
  40. Post
    Author
  41. Post
    Author
    Banjer

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

  42. Post
    Author
    Austin Burke

    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?

  43. Post
    Author
  44. Post
    Author
    黎阳

    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?

  45. Post
    Author
    Ener Macabecha Cabuhan

    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?

  46. Post
    Author
    Neville N

    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?

  47. Post
    Author
  48. Post
    Author
  49. Post
    Author
  50. Post
    Author
  51. Post
    Author
  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
  55. Post
    Author
    Lalit kumar baghel

    jshon.html:22 Access to XMLHttpRequest at 'file:///C:/Users/me/Desktop/slider/json/new1/alal.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    how to solve this problem plz send url see for video.

    json file

  56. Post
    Author
    Parth Bhodia

    Even after adding p5.js library, the loadJSON function doesnt seem to work. The browser keeps showing an error saying it's undefined. Please can you help me with that?

  57. Post
    Author
  58. Post
    Author
    SEAMS

    Hi I wonder if you can illestrate how I get specific data from a website like a table that updated dynamically to my website using the URL ,with JavaScript
    If you can even script some code to show the idea will be also great
    Thanks

  59. Post
    Author
  60. Post
    Author
    Manish Gupta

    Sir,
    When run the code using Python our url getting the error.
    [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:847)

  61. Post
    Author
    VergilTheDevil666

    Can you make a video for promises, async callbacks and better way to handle array of objects, etc all that without p5.js please

  62. Post
    Author
  63. Post
    Author
  64. Post
    Author
  65. Post
    Author
    Yihan Zhou

    omg why i didn't find your tutorials years ago when you published? I may probably already become a super creative coder!!!!!

  66. Post
    Author
  67. Post
    Author
  68. Post
    Author
    Bilawal Ahmed

    Retrieve my delete Data from this url please
    http://www.wbcssc.net/printform.php?appid=MjAzMTYwMjUxMDE1NTcwMA==

  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
    Naser islam

    Simple HTML5 PLAYER Source

    script.js    http://pasted.co/e140ef8a

    style.css    http://pasted.co/ecfe1409

    index.html   http://pasted.co/9291b24f

    use your own video.mp4 in same dir .

  72. Post
    Author
  73. Post
    Author
  74. Post
    Author
    Ener Macabecha Cabuhan

    Sir using that way, u can create multiplayer game that transmit data very fast. U just need to add additional data to that json file about x and y value

  75. Post
    Author
  76. Post
    Author
  77. Post
    Author
  78. Post
    Author
  79. Post
    Author
    itmesneha

    okay so i've been following along with all these videos and i'm getting the error:

    println isn't defined.

    so i changed it to just print(), and there's no error anymore but it also isn't displaying anything.

    var flower;

    function setup() {

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

    }

    function gotData(data)

    {

    print(data);

    }

    function draw()

    {

    }

  80. Post
    Author
  81. Post
    Author
  82. Post
    Author
  83. Post
    Author
  84. Post
    Author
    dragan mirovic

    my json file ../assets/api/music.json for music and how import to html page data-id="4393090382" data-category="Dance" data-tag="Other" data-source="" > ????

  85. Post
    Author
  86. Post
    Author
  87. Post
    Author
  88. Post
    Author
    Edward Gaborno

    how to load data from json file and display to carousel bootstrap 4? like creating testimonials for google reviews

  89. Post
    Author
    TheLastPaladin777

    Thanks for the explanation on how Javascript handles boolean. I couldn't wrap my head how js just automatically knew if something was true or not coming from languages where you kinda had to define that yourself. Also, you're so damn entertaining and seem like a genuinely cool person. 🙂

  90. Post
    Author
  91. Post
    Author
  92. Post
    Author
  93. Post
    Author
    Ghazanfar Ansari

    Currency exchange data would be better visualized with this.
    Here is an api for one such exchange if anyone wants to try
    https://www.bitmex.com/api/v1/trade?symbol=XBT&reverse=true

  94. Post
    Author
  95. Post
    Author
  96. Post
    Author
  97. Post
    Author
    Samuel Haffner

    i never comment on a video saying it help me but omg, I was struggling for an hour on loading a json file on p5 and was getting an undefined error. As soon as i implemented the onLoad function, it worked perfectly. TY SIR! <3

  98. Post
    Author
  99. Post
    Author
  100. Post
    Author
    agata0214

    i got an error saying "It looks like there was a problem loading your json. Try checking if the file path [http://api.open-notify.org/astros.json] is correct, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server] " ALTHOUGH I got the URL right..

Leave a Reply

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