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

TL;DR

Learn how to load JSON data from a URL in p5.js using the loadJSON function and asynchronous callbacks.

Transcript

In 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. And this is one step along the way to querying an API, to saying like, hey, weather map thing, give me some weather data. Or, hey, New York Times, give me some New York Times data. But I want to... Read More

Key Insights

• 👻 The loadJSON function in p5.js allows for easy loading of JSON data from a URL by replacing the local file name in the preload function.
• 🪡 Asynchronous data loading is necessary for scenarios where data needs to be fetched dynamically during program execution.
• 💨 Callback functions are used to handle the data when it arrives, providing a way to continue program execution without waiting for the data to load.
• 🍵 JavaScript in general, and p5.js specifically, provide methods like loadJSON to handle data loading and asynchronous operations.
• 💦 Working with external APIs or data sources often require using techniques like JSONP to overcome security restrictions.
• 💐 By using if statements and booleans, you can control the flow of your program and ensure that data is loaded before using it for visualizations.

Questions & Answers

Q: How do you load JSON data from a URL in p5.js?

To load JSON data from a URL, use the loadJSON function and pass the URL as the first argument and a callback function as the second argument. The callback function will be triggered when the data is loaded.

Q: What is the difference between preload and loadJSON functions in p5.js?

The preload function is used to load data before the program starts, ensuring that all the data is available from the beginning. On the other hand, the loadJSON function loads data asynchronously, allowing the program to continue running while the data is being fetched.

Q: How can you ensure that the data has finished loading before using it in p5.js?

In p5.js, you can use asynchronous callbacks to handle data loading. The callback function is triggered when the data is loaded, and it should be defined with a parameter that p5.js will fill with the loaded data. This way, you can ensure that the data is available for use in your program.

Q: What is JSONP, and why is it sometimes necessary to use it?

JSONP (JSON with padding) is a technique to bypass the same-origin policy and allow cross-origin data access. It involves adding a callback parameter to the URL when fetching JSON data. JSONP is useful when the server doesn't have the appropriate CORS headers set, preventing the usual access to the data.

Summary & Key Takeaways

• The p5.js library allows for easy loading of JSON data from a URL, by replacing the local file name with a URL.

• Preloading data using the preload function is not suitable for scenarios where data needs to be loaded dynamically, such as fetching weather data or financial data that continuously changes.

• To load data asynchronously, use the loadJSON function with a callback function to handle the data when it arrives.

• The callback function should be defined with a parameter, and p5.js will automatically fill that parameter with the loaded data.