8.2: What is JSON? Part I – p5.js Tutorial

This video covers JSON (JavaScript Object Notation)? What is it? What is the syntax? How do you load a JSON file? How does this help you along the way to working with APIs.

All examples:



Next video:

JavaScript basics:

HTML/CSS basics:

Full Data playlist:

Help us caption & translate this video!






43 responses to “8.2: What is JSON? Part I – p5.js Tutorial”

  1. Creativera Avatar

    your explanations are awesome!

  2. Chris Ll Avatar

    For those of you having an issue with the loadJSON function in Google Chrome, these steps should do the trick.
    1) install NodeJs (nodejs.org/en/)
    2) run "npm install http-server -g" on your command line
    3) on the command line, now you can run "http-server 'file path' –allow-file-access-from-files"

    After doing these steps, you can now produce the same effect as Dan is instructing us by. I hope that helped you guys.

    P.S. Make sure to run step 3 anytime you need a new instance.

  3. Asma khan suri Avatar

    We have to out at the end "0"??

  4. Gourav Punani Avatar

    sir my browser is not loading the json data from the file, it say url scheme must be 'http' or 'https' for core request. i can't understsand what does it mean . will you please help in out??

  5. ProTendoXTechnology Avatar

    Is JSON able to be used locally? I mean that if I wrote a program that runs on my machine and not on the web then would I still be able to load data from the JSON file in a program written in C++ or something similar?

  6. Tobi Ajala Avatar

    How do you display this on a html file? Like a web page

  7. lysdexic Avatar

    sometimes when you're having a shitty day and your code doesn't work and you've stopped caring about everything – all it takes is dan singing about "javascript is always asynchronous" to turn it around.

    thanks dan

  8. Niyati Avatar

    Enjoy your tutorilas, very refreshing and insightful. Thank you!

  9. GTPhil91 Avatar

    perfect teacher!!

  10. Brian Pennington Avatar

    Red and green to make yellow??? You're a genius but roflcopter.

  11. raphael gako Avatar

    Hi i like your videos. one question. im using ATOM and theres is no loadJSON function. may I know how did you load ur json file locally without using ajax??

  12. Adnan khan Avatar

    man your very friendly! whats your name?

  13. Cre Henge Avatar

    all I get is "Loading,…". How do I solve it?

  14. Hussein Saad Avatar

    please why i have this error , in preload function when i use loadJSON()

    " XMLHttpRequest cannot load file:///C:/users/Hu/Desktop/8.2_p5.js_what_is_JSON_pt1/flower.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    getRequest @ p5.js:5131 "

  15. Bob Gonzalez Avatar

    I love your presentation style.

  16. PapaJoeB Avatar

    while trying to load the JSON data, I keep getting a "URL scheme must be "http" or "https" for CORS request." error in the console. any thoughts? I'm using p5.min.js locally. without the JSON load stuff, i can get the canvas and content to render no prob. so , I know rhe p5 is working

    Thank you so much for the vids btw….super good

  17. Bradley Stone Avatar

    Why did I have a random thought that this is like Blue's Clues for adults.

    Also, serious question. I tried to use one of these Github json files and I can't get it to display the data from that file in my program. I assume it will be explained in future videos, but I can only access one piece of the file at a time. Perhaps an array will work?

  18. Engineer Passion Avatar

    dude can I use a promise instead of preload function?

  19. Jeff Lever Avatar

    no more coffee for you!

  20. kishore arimilli Avatar

    your explanation with interest is very good

  21. Nawal Avatar

    What program were you using in this tuturial?

  22. sophia jenson Avatar

    can you use JSON on a notepad

  23. Paul Alford Avatar

    Subscribed! Loving the energy of your videos. Thanks for the intro to json. I'll be watching more!

  24. Parker Avatar

    I started using brackets instead of p5 based on your instruction from your first JavaScript tutorial and uninstalled p5. How do I create a new json file in brackets the same way you have opened one in p5?

  25. Yousra M Avatar

    I'm smiling while learning JavaScript! You are amazing!
    Thank you so much!

  26. Trent M Avatar

    What theme is that?

  27. Ratnaparkhi Vasudev Avatar

    only one thing: this dude talks a lot. haha. loved the video and loved the talking as well. keep talking and making more of it.

  28. mookjais Avatar

    Very easy to understand.  Good job dude!

  29. Woosik Koong Avatar

    You are always so full of energy! All your videos are very instructive and entertaining. Thank you so much for making these videos!!!

  30. ChIrUsHa Avatar

    Please help,i have a error{XMLHttpRequest cannot load file:///D:/Site/Site/flower.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. p5.js:5131}.Thanks

  31. ArNr Avatar

    at beginning I gave u thump bcoz u were smile and dance , but after see ur tutorial I give thousand thumps.

  32. ChemielehrerMH Avatar

    Nice tutorial… but I can't get the project to work :-((
    When I try to start it in a browser, it displays "Loading…." and that's all. I tried it in different browsers on different PCs…always the same issue. It seems to be a problem with the loadJSON(…) in the preload-function.

    What am I missing?

    EDIT: Ah… it only seems to be running from a webserver, not from the files on the harddrive without XAMMP or so…. maybe I skipped the tutorials on that…. 😉

  33. Ankeet Patel Avatar

    Thanks a lot Daniel! Easily the most enjoyable and informative series tackling the most dreadful and technical domain 'data'. Keep up!

  34. potaraju92 Avatar

    When I use loadJSON() in my js code, the console throws an error as Uncaught ReferenceError: loadJSON is not defined(…), does anyone knows the solution

  35. Jeremy Ford Avatar

    I hate JavaScript: I haven't programmed in it enough. JSON is cool.

  36. Rakib Jahan Avatar

    Your Videos are the best videos regarding this topic.The style of your teaching is extraordinary , exceptional and smart.Thanks for the creative approach of teaching. Btw..while making the video how did you point out at the screen at the correct place ? :/

  37. Edwin Perez Avatar

    Why does this not work?

    var dinos;

    function preload() {

    var dinos = loadJSON("frases.json");
    function setup() {


    function draw() {



  38. Joker Don Avatar

    in your first example, how did that worked? you didnt call the function. im confused help please

  39. abeechr Avatar

    I enjoyed the video, thanks! However, I''m stuck! Using Chrome, I can not seem to load the json file. I keep getting this error message in the console. I doubled checked and the filepath is correct.

    XMLHttpRequest cannot load (filepath) Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.


    Any help would be appreciated!

  40. Alonso Serrano Avatar

    Thanks! This is great! I really like your teaching style. Your tutorials look very, very interesting and I'm dying to go through some of them. I think they're out of my league for now, but it's great to know they'll be waiting. 🙂

  41. Ryan Scharfer Avatar

    Here is the link to the github repository you mentioned.

Leave a Reply

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