title
10.4: Loading JSON data from a URL (Asynchronous Callbacks!) - p5.js Tutorial
description
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:
https://youtu.be/ecT42O6I_WI
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/QbuF/
📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
detail
{'title': '10.4: Loading JSON data from a URL (Asynchronous Callbacks!) - p5.js Tutorial', 'heatmap': [{'end': 434.038, 'start': 401.987, 'weight': 0.965}, {'end': 512.561, 'start': 475.842, 'weight': 0.82}], 'summary': 'Tutorial explores loading json data from a url, highlighting the simplicity and convenience of preloading for ensuring all data is loaded before the program starts. additionally, it discusses the limitations of preloading in real-time programs, emphasizes the importance of asynchronous data loading in javascript, and provides examples of weather visualization, financial data, and querying real-time json data from an api to display the number of people in space. it also covers security issues, access control, error messages, and the use of jsonp as a method to access data, demonstrating real-time data visualization in p5.js and providing a workaround for asynchronous data loading.', 'chapters': [{'end': 47.52, 'segs': [{'end': 47.52, 'src': 'embed', 'start': 1.206, 'weight': 0, 'content': [{'end': 9.11, 'text': "This video I want to look at loading JSON data not from a local file, like a file like birds.json that's right there in your project but from a URL.", 'start': 1.206, 'duration': 7.904}, {'end': 17.675, 'text': 'And this is one step along the way to querying an API, to saying like, hey, weather map thing, give me some weather data.', 'start': 9.15, 'duration': 8.525}, {'end': 20.537, 'text': 'Or hey, New York Times, give me some New York Times data.', 'start': 17.695, 'duration': 2.842}, {'end': 22.878, 'text': 'But I want to start simpler than that.', 'start': 21.257, 'duration': 1.621}, {'end': 31.626, 'text': 'So first of all, This is actually really, really easy in the sense that all I need to do is replace birds.json with a URL that gives me JSON data.', 'start': 22.898, 'duration': 8.728}, {'end': 39.053, 'text': 'But it brings up a question about how you work with loading data beyond just this preload thing.', 'start': 31.946, 'duration': 7.107}, {'end': 41.636, 'text': 'So the preload idea was super convenient.', 'start': 39.113, 'duration': 2.523}, {'end': 46.48, 'text': 'It guarantees that all the data is loaded before the program starts.', 'start': 42.697, 'duration': 3.783}, {'end': 47.52, 'text': "So you've got all the data.", 'start': 46.5, 'duration': 1.02}], 'summary': 'Loading json data from a url for querying apis, starting simpler than that, replacing file with url, and working with loading data beyond preload.', 'duration': 46.314, 'max_score': 1.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY1206.jpg'}], 'start': 1.206, 'title': 'Loading json data from a url', 'summary': 'Discusses the process of loading json data from a url, emphasizing its simplicity and the convenience of the preload idea for ensuring all data is loaded before the program starts.', 'chapters': [{'end': 47.52, 'start': 1.206, 'title': 'Loading json data from a url', 'summary': 'Discusses the process of loading json data from a url as a step towards querying an api, highlighting the simplicity of the process and the convenience of the preload idea for ensuring all data is loaded before the program starts.', 'duration': 46.314, 'highlights': ['The process of loading JSON data from a URL is a step towards querying an API and is highlighted for its simplicity.', 'Replacing a local file with a URL that provides JSON data is described as really easy.', 'The preload idea is praised for its convenience in ensuring all data is loaded before the program starts.']}], 'duration': 46.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY1206.jpg', 'highlights': ['The preload idea is praised for its convenience in ensuring all data is loaded before the program starts.', 'The process of loading JSON data from a URL is a step towards querying an API and is highlighted for its simplicity.', 'Replacing a local file with a URL that provides JSON data is described as really easy.']}, {'end': 455.389, 'segs': [{'end': 129.777, 'src': 'embed', 'start': 92.018, 'weight': 0, 'content': [{'end': 94.379, 'text': "You've got to load the data while the program is running.", 'start': 92.018, 'duration': 2.361}, {'end': 98.721, 'text': 'Certainly, you could also make the same case of, as a program is running.', 'start': 95.26, 'duration': 3.461}, {'end': 105.705, 'text': "you just want to continuously like if you're trying to visualize financial data and it's just changing every three seconds in your draw loop.", 'start': 98.721, 'duration': 6.984}, {'end': 108.506, 'text': 'you might want to query the data and query the data and query the data.', 'start': 105.945, 'duration': 2.561}, {'end': 113.129, 'text': "You also don't want the program to stop animating while it's waiting to load the data.", 'start': 108.546, 'duration': 4.583}, {'end': 124.975, 'text': "So you need to load the data in what's known as an asynchronous manner, meaning when the data can arrive in another parallel universe of your code.", 'start': 113.489, 'duration': 11.486}, {'end': 125.336, 'text': "that's running.", 'start': 124.975, 'duration': 0.361}, {'end': 126.596, 'text': 'So your code is trucking along.', 'start': 125.356, 'duration': 1.24}, {'end': 127.597, 'text': "It's starting.", 'start': 126.916, 'duration': 0.681}, {'end': 128.517, 'text': "It's animating.", 'start': 127.817, 'duration': 0.7}, {'end': 129.058, 'text': "It's looping.", 'start': 128.597, 'duration': 0.461}, {'end': 129.777, 'text': "It's doing its stuff.", 'start': 129.078, 'duration': 0.699}], 'summary': 'Load data asynchronously to keep program animation uninterrupted.', 'duration': 37.759, 'max_score': 92.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY92018.jpg'}, {'end': 252.736, 'src': 'embed', 'start': 225.955, 'weight': 1, 'content': [{'end': 231.419, 'text': 'Of course, with native JavaScript or jQuery or all these other frameworks, they all have something similar to this.', 'start': 225.955, 'duration': 5.464}, {'end': 236.163, 'text': "So conceptually, this is a kind of concept that's sort of across the board in working with data.", 'start': 231.64, 'duration': 4.523}, {'end': 239.265, 'text': 'But this syntax and this function name is specific to p5.js.', 'start': 236.323, 'duration': 2.942}, {'end': 245.63, 'text': 'I give it the URL, I give it the callback, and then this function is triggered when the data is ready.', 'start': 240.666, 'duration': 4.964}, {'end': 247.331, 'text': 'Like, the data is ready.', 'start': 245.67, 'duration': 1.661}, {'end': 248.152, 'text': 'I got some singing in.', 'start': 247.412, 'duration': 0.74}, {'end': 248.552, 'text': "That's good.", 'start': 248.172, 'duration': 0.38}, {'end': 252.736, 'text': "The question is like, where is the data? Like, I've completely lost.", 'start': 250.154, 'duration': 2.582}], 'summary': 'Working with data and triggering functions in p5.js, with a focus on concept versatility.', 'duration': 26.781, 'max_score': 225.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY225955.jpg'}, {'end': 437.02, 'src': 'heatmap', 'start': 401.987, 'weight': 3, 'content': [{'end': 411.795, 'text': "So what I want to do is I'll use a simple an API that I like to use, which is a URL for JSON data that I like to use.", 'start': 401.987, 'duration': 9.808}, {'end': 418.019, 'text': 'This is really, which tells us how many people are in space right now.', 'start': 411.815, 'duration': 6.204}, {'end': 421.221, 'text': "So I'm going to go grab this URL right here.", 'start': 418.94, 'duration': 2.281}, {'end': 425.292, 'text': "I'm going to paste it into the browser just to see that this works.", 'start': 422.55, 'duration': 2.742}, {'end': 426.533, 'text': 'And you can see, look at this.', 'start': 425.552, 'duration': 0.981}, {'end': 430.235, 'text': 'This URL is giving me JSON data.', 'start': 427.493, 'duration': 2.742}, {'end': 434.038, 'text': "What is it giving me? It's giving me information about the number of people in space.", 'start': 430.575, 'duration': 3.463}, {'end': 437.02, 'text': "And you can see it's an object with a number six.", 'start': 434.398, 'duration': 2.622}], 'summary': 'Using a url for json data to retrieve the current number of people in space, which is six.', 'duration': 25.205, 'max_score': 401.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY401987.jpg'}], 'start': 47.54, 'title': 'Asynchronous data loading in programs', 'summary': 'Discusses limitations of preloading data in real-time programs and importance of loading data asynchronously in javascript. it illustrates using examples of weather visualization and financial data in p5.js, and querying real-time json data from an api to display the number of people in space.', 'chapters': [{'end': 91.998, 'start': 47.54, 'title': 'Preloading data in programs', 'summary': 'Discusses the limitations of preloading data in real-time programs, using the example of weather visualization where the program needs to fetch the most recent data upon user interaction.', 'duration': 44.458, 'highlights': ['Real-time programs face limitations in preloading data, as exemplified by the challenge of fetching the most recent weather data upon user interaction.', 'The scenario involves a weather visualization program where the user needs to fetch the most recent weather data every time a button is pressed, highlighting the impracticality of preloading data for future events.', 'Preloading data is not feasible for fetching future data in real-time programs, revealing the challenge of incorporating real-time data updates.']}, {'end': 455.389, 'start': 92.018, 'title': 'Asynchronous data loading in javascript', 'summary': 'Discusses the importance of loading data asynchronously in javascript, using the load json function in p5.js to continuously update and visualize changing financial data, and querying real-time json data from an api to display the number of people in space, demonstrating the concept of asynchronous data loading in javascript.', 'duration': 363.371, 'highlights': ['Importance of loading data asynchronously in JavaScript The chapter emphasizes the significance of loading data asynchronously in JavaScript to ensure the program continues running without interruption while waiting for the data to load.', 'Using load JSON function in p5.js to continuously update and visualize changing financial data The load JSON function in p5.js is utilized to continuously update and visualize changing financial data, demonstrating the practical application of asynchronous data loading for real-time visualization.', 'Querying real-time JSON data from an API to display the number of people in space The chapter demonstrates querying real-time JSON data from an API to display the number of people in space, showcasing the practical implementation of asynchronous data loading for real-time information retrieval.']}], 'duration': 407.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY47540.jpg', 'highlights': ['Importance of loading data asynchronously in JavaScript to ensure uninterrupted program execution.', 'Demonstrates practical application of asynchronous data loading for real-time visualization using p5.js.', 'Real-time programs face limitations in preloading data for future events, highlighting the challenge of incorporating real-time data updates.', 'Demonstrates querying real-time JSON data from an API to display the number of people in space, showcasing practical implementation of asynchronous data loading for real-time information retrieval.']}, {'end': 1168.321, 'segs': [{'end': 500.94, 'src': 'embed', 'start': 475.842, 'weight': 4, 'content': [{'end': 480.806, 'text': 'So you can see that loadJSON works not just with a local file, but with a particular URL.', 'start': 475.842, 'duration': 4.964}, {'end': 485.949, 'text': "And now if I run this, ooh, I don't see anything.", 'start': 481.186, 'duration': 4.763}, {'end': 488.211, 'text': 'I wonder, hmm, interesting.', 'start': 486.029, 'duration': 2.182}, {'end': 490.873, 'text': "And I didn't even get an error.", 'start': 489.652, 'duration': 1.221}, {'end': 493.375, 'text': "I'm going to just add something.", 'start': 492.374, 'duration': 1.001}, {'end': 495.156, 'text': "Close your eyes and don't pay attention to what I'm doing.", 'start': 493.415, 'duration': 1.741}, {'end': 495.776, 'text': 'Yeah, it worked.', 'start': 495.416, 'duration': 0.36}, {'end': 498.018, 'text': 'OK, so this is a good moment to have this discussion.', 'start': 495.856, 'duration': 2.162}, {'end': 500.94, 'text': 'Security is a thing.', 'start': 499.059, 'duration': 1.881}], 'summary': 'Loadjson works with a url, no errors, security discussion.', 'duration': 25.098, 'max_score': 475.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY475842.jpg'}, {'end': 512.561, 'src': 'heatmap', 'start': 475.842, 'weight': 0.82, 'content': [{'end': 480.806, 'text': 'So you can see that loadJSON works not just with a local file, but with a particular URL.', 'start': 475.842, 'duration': 4.964}, {'end': 485.949, 'text': "And now if I run this, ooh, I don't see anything.", 'start': 481.186, 'duration': 4.763}, {'end': 488.211, 'text': 'I wonder, hmm, interesting.', 'start': 486.029, 'duration': 2.182}, {'end': 490.873, 'text': "And I didn't even get an error.", 'start': 489.652, 'duration': 1.221}, {'end': 493.375, 'text': "I'm going to just add something.", 'start': 492.374, 'duration': 1.001}, {'end': 495.156, 'text': "Close your eyes and don't pay attention to what I'm doing.", 'start': 493.415, 'duration': 1.741}, {'end': 495.776, 'text': 'Yeah, it worked.', 'start': 495.416, 'duration': 0.36}, {'end': 498.018, 'text': 'OK, so this is a good moment to have this discussion.', 'start': 495.856, 'duration': 2.162}, {'end': 500.94, 'text': 'Security is a thing.', 'start': 499.059, 'duration': 1.881}, {'end': 512.561, 'text': 'Right, authenticating with a name and a password and allowing a browser your browser on your machine to talk to your camera or to talk to another server.', 'start': 503.197, 'duration': 9.364}], 'summary': 'Loadjson can fetch data from urls, security involves authentication with a name and password.', 'duration': 36.719, 'max_score': 475.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY475842.jpg'}, {'end': 581.647, 'src': 'embed', 'start': 549.504, 'weight': 3, 'content': [{'end': 551.766, 'text': 'And you can actually see the error message that came.', 'start': 549.504, 'duration': 2.262}, {'end': 554.888, 'text': 'XML HTTP request cannot load.', 'start': 552.226, 'duration': 2.662}, {'end': 556.309, 'text': "There's no access control.", 'start': 554.968, 'duration': 1.341}, {'end': 557.971, 'text': 'Allow origin as present.', 'start': 556.329, 'duration': 1.642}, {'end': 560.313, 'text': 'Origin is therefore not allowed access.', 'start': 558.331, 'duration': 1.982}, {'end': 564.056, 'text': 'This error message is like the bane of my existence.', 'start': 560.713, 'duration': 3.343}, {'end': 568.418, 'text': "I always forget that it might happen and sometimes it doesn't happen and sometimes it does happen.", 'start': 564.856, 'duration': 3.562}, {'end': 570.64, 'text': 'This has nothing to do with you or me.', 'start': 568.719, 'duration': 1.921}, {'end': 576.824, 'text': 'This has to do with how the server, the place that the URL address is configured.', 'start': 571.06, 'duration': 5.764}, {'end': 581.647, 'text': 'And this URL does not necessarily just allow you by default to grab the data.', 'start': 577.104, 'duration': 4.543}], 'summary': 'Xml http request error: access control origin not allowed, server configuration restricts data access.', 'duration': 32.143, 'max_score': 549.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY549504.jpg'}, {'end': 626.228, 'src': 'embed', 'start': 594.554, 'weight': 2, 'content': [{'end': 598.437, 'text': 'And I feel like that would be an interesting topic for another video to delve into that more deeply.', 'start': 594.554, 'duration': 3.883}, {'end': 607.42, 'text': "So sometimes if you're not allowed access in the sort of traditional way, you can use this thing called JSONP to get the data.", 'start': 599.157, 'duration': 8.263}, {'end': 615.243, 'text': "And you know one of the ways that I do is I like put the URL in load JSON and when it doesn't work, I just add JSONP and I hope that it works.", 'start': 607.46, 'duration': 7.783}, {'end': 617.683, 'text': "And usually it's gonna, you know, I try it first without it.", 'start': 615.603, 'duration': 2.08}, {'end': 619.024, 'text': "If it doesn't work, I try it with it.", 'start': 617.784, 'duration': 1.24}, {'end': 626.228, 'text': "I'll maybe include a link to more information about JSONP in the description of this video.", 'start': 620.205, 'duration': 6.023}], 'summary': 'Using jsonp as an alternative for accessing data, with a trial-and-error approach.', 'duration': 31.674, 'max_score': 594.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY594554.jpg'}, {'end': 760.289, 'src': 'embed', 'start': 736.324, 'weight': 0, 'content': [{'end': 742.574, 'text': 'I can now see that when I run this, I now get this lovely canvas with six circles on it.', 'start': 736.324, 'duration': 6.25}, {'end': 746.498, 'text': 'So this is, look, I did data visualization.', 'start': 742.795, 'duration': 3.703}, {'end': 748.32, 'text': 'I loaded a URL.', 'start': 747.139, 'duration': 1.181}, {'end': 749.801, 'text': 'I gave it a callback.', 'start': 748.64, 'duration': 1.161}, {'end': 752.243, 'text': 'I even used JSONP for some padding.', 'start': 749.881, 'duration': 2.362}, {'end': 755.066, 'text': "I have my padding song, but that's different.", 'start': 753.385, 'duration': 1.681}, {'end': 755.927, 'text': "That's like CSS.", 'start': 755.086, 'duration': 0.841}, {'end': 760.289, 'text': 'Anyway I need a separate video which is just the padding song.', 'start': 756.367, 'duration': 3.922}], 'summary': 'Data visualization with six circles using loaded url, callback, and jsonp for padding.', 'duration': 23.965, 'max_score': 736.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY736324.jpg'}, {'end': 1168.321, 'src': 'embed', 'start': 1144.111, 'weight': 1, 'content': [{'end': 1149.513, 'text': 'or can you use the rest of the data here also and quickly get it to work in this asynchronous callback way?', 'start': 1144.111, 'duration': 5.402}, {'end': 1154.861, 'text': "And I think now we've actually covered enough that the next step can really be is like well,", 'start': 1149.833, 'duration': 5.028}, {'end': 1159.247, 'text': "what if you've got an API like the New York Times or Instagram that's serving up data?", 'start': 1154.861, 'duration': 4.386}, {'end': 1164.315, 'text': 'How do you query that API with low JSON and do stuff that way? OK,', 'start': 1159.407, 'duration': 4.908}, {'end': 1166.658, 'text': 'Boy, this was a 20-minute video.', 'start': 1165.296, 'duration': 1.362}, {'end': 1168.321, 'text': "Oh, I don't know about this.", 'start': 1166.758, 'duration': 1.563}], 'summary': 'Covered using asynchronous callback for querying apis, 20-minute video.', 'duration': 24.21, 'max_score': 1144.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY1144111.jpg'}], 'start': 455.389, 'title': 'Data loading and security discussion', 'summary': 'Discusses loading json data from a url, encountering security issues, the importance of access control, and error messages, along with using jsonp as a method to access data, demonstrating with p5.js to visualize real-time data from an api, and emphasizing the workaround for asynchronous data loading.', 'chapters': [{'end': 570.64, 'start': 455.389, 'title': 'Data loading and security discussion', 'summary': 'Discusses the process of loading json data from a url, encountering security issues, and the importance of understanding access control and error messages.', 'duration': 115.251, 'highlights': ['The chapter demonstrates the process of loading JSON data from a URL and the potential security issues that may arise. The chapter discusses using loadJSON function to retrieve data from a URL and encountering security issues when trying to access certain data.', 'The importance of understanding access control and error messages when working with data is emphasized. The chapter highlights the significance of understanding access control and error messages in working with data, especially when encountering security issues.']}, {'end': 1168.321, 'start': 571.06, 'title': 'Using jsonp for data access', 'summary': 'Discusses using jsonp as a method to access data when traditional methods fail, and demonstrates using it with p5.js to visualize real-time data from an api, with emphasis on the workaround for asynchronous data loading.', 'duration': 597.261, 'highlights': ['JSONP allows accessing data when traditional methods fail JSONP is used as a workaround to access data when traditional methods are restricted, allowing for data retrieval from the server.', 'Demonstrating real-time data visualization with p5.js The transcript demonstrates using p5.js to visualize real-time data from an API, showcasing the ability to draw circles based on the number of people in space.', 'Asynchronous data loading workaround using Boolean test The speaker explains a workaround for asynchronous data loading using a Boolean test in JavaScript, allowing visualization to occur only after the data has been loaded.']}], 'duration': 712.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6mT3r8Qn1VY/pics/6mT3r8Qn1VY455389.jpg', 'highlights': ['Demonstrating real-time data visualization with p5.js', 'Asynchronous data loading workaround using Boolean test', 'JSONP allows accessing data when traditional methods fail', 'The importance of understanding access control and error messages when working with data is emphasized', 'The chapter demonstrates the process of loading JSON data from a URL and the potential security issues that may arise']}], 'highlights': ['The process of loading JSON data from a URL is a step towards querying an API and is highlighted for its simplicity.', 'Importance of loading data asynchronously in JavaScript to ensure uninterrupted program execution.', 'Demonstrates querying real-time JSON data from an API to display the number of people in space, showcasing practical implementation of asynchronous data loading for real-time information retrieval.', 'Demonstrating real-time data visualization with p5.js', 'The preload idea is praised for its convenience in ensuring all data is loaded before the program starts.', 'Real-time programs face limitations in preloading data for future events, highlighting the challenge of incorporating real-time data updates.', 'JSONP allows accessing data when traditional methods fail', 'The importance of understanding access control and error messages when working with data is emphasized', 'Replacing a local file with a URL that provides JSON data is described as really easy.', 'Asynchronous data loading workaround using Boolean test']}