filmov
tv
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:
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:
0:05:50
GET Data from API & Display in HTML with JavaScript Fetch API
0:28:42
Fetch API & Rendering Data with JavaScript
0:06:35
Learn Fetch API In 6 Minutes
0:17:23
GET Data from API & Display in HTML using JavaScript Fetch API
0:16:23
Fetching API data and displaying API data inside table.
0:05:11
How to Fetch and Display data from API in React JS with Modern Fetch API
0:07:39
Fetch API JavaScript in Easiest way | Fetch API Tutorial
0:07:55
Full React Tutorial #17 - Fetching Data with useEffect
0:03:31
How to FETCH DATA from an API using JavaScript
0:06:27
Read JSON File into HTML with JavaScript Fetch API
0:08:01
Next.js Tutorial #10 - Fetching Data (getStaticProps)
![[48] Flatlist With](https://i.ytimg.com/vi/V20596U9fYk/hqdefault.jpg)
0:10:54
[48] Flatlist With API Data in React Native| Fetch Data from api and Render the data in React Native
0:16:23
Fetch an API to Display on Page - React Tutorial 22
0:16:09
Fetching API data and displaying API data in the UI | Fetch API in JavaScript in 2022
0:09:52
POST Form Data With JavaScript Fetch API
0:06:56
How to Fetch Data From API using React JS and Display in Table using Axios Library
0:04:27
Display JSON data in HTML table using JavaScript
0:08:36
Render fetch() API data using React hooks(useState) | ReactJS | [2021]
0:25:00
JavaScript fetch API - GET data from external REST API & display with HTML/CSS DOM manipulations
0:12:31
Fetch API | JavaScript Tutorial in Hindi #66
0:07:19
I Never Want To Fetch Data Any Other Way
0:03:54
How To Make API Call In React using useEffect() Hook With Fetch API and async / await
0:09:25
POST Form Data as JSON with Fetch API in JavaScript
0:20:10
Vue JS 3 Tutorial for Beginners #9 - Fetching Data
Комментарии