Fetch API & Rendering Data with JavaScript
In this video, we take a look at the browser's built in Fetch API to get some dummy data. We then map over that dummy data to create some HTML with Vanilla JavaScript and render it onto the screen.
Key Takeaways From The Video:
3:20 - The Fetch API returns a Promise, so you need to wait for the promise to resolve by using .then() after it.
4:16 - The Fetch API initially return a Response object, which will tell you the status code of the response among other details
5:15 - We need to run the .json() method on the response object to turn the response into more useful data. The .json() method will also return a promise, so we need to chain another .then() onto it.
8:10 - When using the Fetch API, it won't automatically throw all errors. You have to manually check to see if the response object has an "ok" property on it, and throw an error if it's not. This will help you catch things like a 404 error with the response.
11:11 - In order to render our data to the screen, we can use innerHTML or insertAdjacentHTML and insert an HTML string into an existing HTML element.
14:13 - Since the data we get back is an array, we can perform .map() on the array to loop over the data. We then use Template literals to construct our HTML string.
22:10 - With the Fetch API, you can also perform a POST request by adding additional options when making the request. Make sure to add the proper "headers" and use JSON.stringify() in the body of the request.
If this video was helpful, please like and subscribe! You can follow me on:
Twitter: https://twitter.com/HuntaroSan
Dev.to: https://dev.to/changoman
Видео Fetch API & Rendering Data with JavaScript канала Code Bushi
Key Takeaways From The Video:
3:20 - The Fetch API returns a Promise, so you need to wait for the promise to resolve by using .then() after it.
4:16 - The Fetch API initially return a Response object, which will tell you the status code of the response among other details
5:15 - We need to run the .json() method on the response object to turn the response into more useful data. The .json() method will also return a promise, so we need to chain another .then() onto it.
8:10 - When using the Fetch API, it won't automatically throw all errors. You have to manually check to see if the response object has an "ok" property on it, and throw an error if it's not. This will help you catch things like a 404 error with the response.
11:11 - In order to render our data to the screen, we can use innerHTML or insertAdjacentHTML and insert an HTML string into an existing HTML element.
14:13 - Since the data we get back is an array, we can perform .map() on the array to loop over the data. We then use Template literals to construct our HTML string.
22:10 - With the Fetch API, you can also perform a POST request by adding additional options when making the request. Make sure to add the proper "headers" and use JSON.stringify() in the body of the request.
If this video was helpful, please like and subscribe! You can follow me on:
Twitter: https://twitter.com/HuntaroSan
Dev.to: https://dev.to/changoman
Видео Fetch API & Rendering Data with JavaScript канала Code Bushi
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![1.1: fetch() - Working With Data & APIs in JavaScript](https://i.ytimg.com/vi/tc8DU14qX6I/default.jpg)
![JavaScript Template Literals: JSON to HTML](https://i.ytimg.com/vi/DG4obitDvUA/default.jpg)
![{ 🌱} API Requests with JavaScript / fetch | Create / add elements with JavaScript DOM | w/ Bulma](https://i.ytimg.com/vi/2ZibeAyAy_o/default.jpg)
![REST API concepts and examples](https://i.ytimg.com/vi/7YcW25PHnAA/default.jpg)
![JavaScript Promises In 10 Minutes](https://i.ytimg.com/vi/DHvZLI7Db8E/default.jpg)
![How to read JSON files into HTML using JavaScript's fetch (no D3, no jQuery, vanilla JS!)](https://i.ytimg.com/vi/C3dfjyft_m4/default.jpg)
![5 JavaScript Concepts You HAVE TO KNOW](https://i.ytimg.com/vi/a00NRSFgHsY/default.jpg)
![Quick Autocomplete App With JS & JSON](https://i.ytimg.com/vi/1iysNUrI3lw/default.jpg)
![JavaScript Fetch with Request and Headers Objects](https://i.ytimg.com/vi/YJ7ZgGnhN5k/default.jpg)
![JSON Array to HTML Table with Javascript](https://i.ytimg.com/vi/XmdOZ5NSqb8/default.jpg)
![Fetch API Introduction](https://i.ytimg.com/vi/Oive66jrwBs/default.jpg)
![2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript](https://i.ytimg.com/vi/Kw5tC5nQMRY/default.jpg)
![Dogs, JavaScript & An API 🐶 Fetch, Promises & Async Await](https://i.ytimg.com/vi/AVmGmLFcukM/default.jpg)
![1.4: JSON - Working with Data and APIs in JavaScript](https://i.ytimg.com/vi/uxf0--uiX0I/default.jpg)
![JSON and AJAX Tutorial: With Real Examples](https://i.ytimg.com/vi/rJesac0_Ftw/default.jpg)
![Async JS Crash Course - Callbacks, Promises, Async Await](https://i.ytimg.com/vi/PoRJizFvM7s/default.jpg)
![10.5: Working with APIs in Javascript - p5.js Tutorial](https://i.ytimg.com/vi/ecT42O6I_WI/default.jpg)
![JavaScript Tip: Using fetch to Load a JSON File](https://i.ytimg.com/vi/1tVCwv_BX2M/default.jpg)
![Using REST APIs in a web application | Quick PHP Tutorial](https://i.ytimg.com/vi/RTjd1nwvlj4/default.jpg)
![Fetch API Explained - Working with Data & APIs in JavaScript](https://i.ytimg.com/vi/djCuFrLLjVk/default.jpg)