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

Corpora: https://github.com/dariusk/corpora

Contact: https://twitter.com/shiffman

Next video:
https://youtu.be/118sDpLOClw

JavaScript basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

HTML/CSS basics:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Full Data playlist:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r

Help us caption & translate this video!

http://amara.org/v/QbuH/

Comments

Bradley Stone says:

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?

Jeremy Ford says:

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

PapaJoeB says:

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

Adnan khan says:

man your very friendly! whats your name?

TrafficsKindaBad says:

This guy isn’t funny

Woosik Koong says:

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

Eric Sauber says:

this guy is super weird but I love it

Yousra M says:

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

Creativera says:

your explanations are awesome!

Alonso Serrano says:

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

Ankeet Patel says:

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

Brian Pennington says:

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

ArNr says:

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

abeechr says:

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.

p5.js:5131

Any help would be appreciated!

Chris Ll says:

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.

Tobi Ajala says:

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

cmetube says:

you should see a shrink. you have serious distractibility and disorganization problems.

Edwin Perez says:

Why does this not work?

var dinos;

function preload() {

var dinos = loadJSON(“frases.json”);
}
function setup() {
createCanvas(600,600)

}

function draw() {
for(i=0;i

ChemielehrerMH says:

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…. 😉

Trent M says:

What theme is that?

GTPhil91 says:

perfect teacher!!

Rakib Jahan says:

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 ? :/

Bob Gonzalez says:

I love your presentation style.

Aditya Limbu says:

I died laughing at 14:49

Paul Alford says:

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

ProTendoXTechnology says:

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?

mookjais says:

Very easy to understand.  Good job dude!

potaraju92 says:

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

Ryan Scharfer says:

I really would like to see more singing.. ; )

Jeff Lever says:

no more coffee for you!

shofi zahra says:

thanks for the video ! i wanna ask something .. is it possible to convert multidimensional array in java code to a json file ?

kishore arimilli says:

your explanation with interest is very good

raphael gako says:

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

Asma khan suri says:

We have to out at the end “0”??

Cre Henge says:

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

Niyati says:

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

 Write a comment

*

Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!