Last active
January 21, 2020 12:47
-
-
Save potikanond/a277aeb03c4849190f2c180112ac68dd to your computer and use it in GitHub Desktop.
JavaScript - Fetch API Tutorial (HTML, JSON)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <!-- 9. add bootstrap --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" | |
| integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <title>Fetch APi Sandbox</title> | |
| </head> | |
| <body> | |
| <!-- 10. add classes --> | |
| <div class="container"> | |
| <h1 class="display-4 mb-4">Fetch API Sandbox</h1> | |
| <div class="d-flex"> | |
| <button class="btn btn-primary mr-4" id="getText">Get Tetxt</button> | |
| <button class="btn btn-success mr-4"id="getUsers">Get JSON</button> | |
| <button class="btn btn-warning mr-4"id="getPosts">Get API Data</button> | |
| </div> | |
| <br> | |
| <form action="" id="addPost"> | |
| <div class="form-group"> | |
| <input class="form-control" type="text" id="title" placeholder="Title"> | |
| </div> | |
| <div> | |
| <textarea class="form-control" id="body" placeholder="Body"></textarea> | |
| </div> | |
| <input class="btn btn-secondary mt-4" type="submit" value="Submit"> | |
| </form> | |
| <hr><br> | |
| <div id="output"></div> | |
| </div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 1. | |
| document.getElementById('getText').addEventListener('click', getText); | |
| function getText() { | |
| fetch('sample.txt') | |
| .then( (res) => { | |
| // 1. console.log(res); | |
| // console.log(res.json()); | |
| // 2. console.log(res.text()); | |
| return res.text(); // 3. passing text to (data) | |
| }) | |
| .then( (data) => { | |
| // console.log(data); // 4. | |
| document.getElementById('output').innerHTML = data; // 5. | |
| }) | |
| .catch( err => console.log(err) ); | |
| } | |
| // 6. | |
| document.getElementById('getUsers').addEventListener('click', getUsers); | |
| function getUsers() { | |
| fetch('users.json') | |
| .then( res => res.json() ) | |
| .then( data => { | |
| let output = '<h2 class="mb-4">Users</h2>'; | |
| data.forEach( user => { | |
| // 11. add bootstrap class | |
| output += ` | |
| <ul class="list-group mb-3"> | |
| <li class="list-group-item">Name: ${user.name}</li> | |
| <li class="list-group-item">Age: ${user.age}</li> | |
| <li class="list-group-item">Email: ${user.email}</li> | |
| </ul> | |
| `; | |
| }); | |
| document.getElementById('output').innerHTML = output; | |
| }) | |
| } | |
| // 7. | |
| document.getElementById('getPosts').addEventListener('click', getPosts); | |
| function getPosts() { | |
| fetch('https://jsonplaceholder.typicode.com/posts') | |
| .then( res => res.json() ) | |
| .then( data => { | |
| // 12. add bootstrap class | |
| let output = '<h2 class="mb-4">Posts</h2>'; | |
| data.forEach( post => { | |
| output += ` | |
| <div class="card card-body mb-3"> | |
| <h3>${post.title}</h3> | |
| <p>${post.body}</p> | |
| </div> | |
| `; | |
| }); | |
| document.getElementById('output').innerHTML = output; | |
| }) | |
| } | |
| // 8. | |
| document.getElementById('addPost').addEventListener('submit', addPost); | |
| function addPost(e) { | |
| e.preventDefault(); | |
| let title = document.getElementById('title').value; | |
| let body = document.getElementById('body').value; | |
| fetch('https://jsonplaceholder.typicode.com/posts', { | |
| method: 'POST', | |
| headers: { | |
| 'Accept': 'application/json, text/plain, */*', | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ title:title, body:body }) | |
| }) | |
| .then( res => res.json() ) | |
| .then( data => console.log(data) ) | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This is Sample text file. | |
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur, laboriosam! | |
| Thank you. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "name": "Dome", | |
| "age": 35, | |
| "email": "[email protected]" | |
| }, | |
| { | |
| "name": "John", | |
| "age": 40, | |
| "email": "[email protected]" | |
| }, | |
| { | |
| "name": "Sara", | |
| "age": 25, | |
| "email": "[email protected]" | |
| }, | |
| { | |
| "name": "Barack", | |
| "age": 55, | |
| "email": "[email protected]" | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ไฟล์ 'sample.txt' สำหรับโค้ดของปุ่มแรก ขอให้นศ.สร้างขึ้นมาเองได้เลย โดยข้อมูลต้องเป็น plain text