├── README.md ├── index.html ├── styles.css ├── demo.json └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Fetch Tutorial 2 | From youtube.com/codestackr 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Fetch Demo 9 | 10 | 11 |

My Blog Posts

12 |

13 | 14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 8 | background: rgb(195, 195, 195); 9 | } 10 | h1 { 11 | text-align: center; 12 | margin: 20px 0; 13 | padding-bottom: 10px; 14 | border-bottom: 2px solid #272727; 15 | } 16 | #posts { 17 | display: grid; 18 | grid-template-columns: repeat(3,1fr); 19 | grid-gap: 10px; 20 | text-align: center; 21 | width: 80vw; 22 | margin: 20px auto; 23 | } 24 | .post { 25 | background: #fff; 26 | box-shadow: 0 0 10px rgba(0,0,0,0.5); 27 | } 28 | .post img { 29 | width: 100%; 30 | } 31 | .post h4 { 32 | margin: 10px; 33 | } 34 | .post p { 35 | padding: 20px; 36 | } 37 | -------------------------------------------------------------------------------- /demo.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "firstName": "John", 4 | "lastName": "Doe", 5 | "Address": { 6 | "Street": "123 Street", 7 | "City": "Houston", 8 | "State": "TX" 9 | }, 10 | "email": "john.doe@email.com", 11 | "phone": "555-555-5555" 12 | }, 13 | { 14 | "firstName": "Jane", 15 | "lastName": "Doe", 16 | "Address": { 17 | "Street": "123 Street", 18 | "City": "Houston", 19 | "State": "TX" 20 | }, 21 | "email": "jane.doe@email.com", 22 | "phone": "444-444-4444" 23 | }, 24 | { 25 | "firstName": "Bob", 26 | "lastName": "Doe", 27 | "Address": { 28 | "Street": "123 Street", 29 | "City": "Houston", 30 | "State": "TX" 31 | }, 32 | "email": "bob.doe@email.com", 33 | "phone": "333-333-3333" 34 | } 35 | ] -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // BASIC DEMO WITH LOCAL FILE 2 | 3 | /* 4 | fetch('demo.json') 5 | .then(res => { 6 | console.log(res); 7 | return res.json(); 8 | }) 9 | .then(json => console.log(json)); 10 | */ 11 | 12 | // BASIC DEMO WITH IMAGE API 13 | 14 | /* 15 | fetch('https://unsplash.it/600/400') 16 | .then(res => res.blob()) 17 | .then(blob => { 18 | let img = document.createElement('img'); 19 | img.src = URL.createObjectURL(blob); 20 | document.querySelector('body').appendChild(img); 21 | }); 22 | */ 23 | 24 | 25 | // ADVANCED DEMO WITH JSONPLACEHOLDER API 26 | 27 | const postSection = document.querySelector('#posts'); 28 | const postTemplate = document.querySelector('#post-template'); 29 | 30 | getData() 31 | .catch(err => console.error(err)); 32 | 33 | async function getData() { 34 | const postStream = await fetch('https://jsonplaceholder.typicode.com/posts'); 35 | const posts = await postStream.json(); 36 | let i = 0; 37 | 38 | // throw 'Get Data Error'; 39 | // console.log(posts); 40 | 41 | posts.forEach(post => { 42 | i++; 43 | if(i < 10) { 44 | const title = post.title; 45 | const body = post.body; 46 | 47 | fetch('https://unsplash.it/300/200') 48 | .then(res => res.blob()) 49 | .then(blob => { 50 | const newPost = document.importNode(postTemplate.content, true); 51 | const postTitle = newPost.querySelector('.post__title'); 52 | const postBody = newPost.querySelector('.post__body'); 53 | const postImg = newPost.querySelector('.post__img'); 54 | 55 | // throw 'Image Fetch Error'; 56 | 57 | postImg.src = URL.createObjectURL(blob); 58 | postTitle.innerText = title; 59 | postBody.innerText = body; 60 | postSection.appendChild(newPost); 61 | }) 62 | .catch(err => console.error(err)); 63 | } 64 | }) 65 | } 66 | 67 | 68 | // CREATE A NEW POST DEMO 69 | 70 | /* 71 | const newPost = { 72 | title: 'New Post Title', 73 | body: 'Awesome post paragraph', 74 | userId: 1 75 | } 76 | 77 | const createNewPost = post => { 78 | const options = { 79 | method: 'POST', 80 | body: JSON.stringify(post), 81 | headers: new Headers({ 82 | 'Content-Type': 'application/json' 83 | }) 84 | } 85 | 86 | return fetch('https://jsonplaceholder.typicode.com/posts', options) 87 | .then(res => res.json()) 88 | .then(posts => console.log(posts)) 89 | .catch(err => console.error(err)); 90 | 91 | } 92 | 93 | createNewPost(newPost); 94 | */ 95 | --------------------------------------------------------------------------------